🐛 fix(Switch/Checkbox): display the focus state only when focused by keyboard

src/Masa.Blazor.JS/src/interop.ts

@@ -4,7 +4,7 @@ import throttle from "just-throttle";
 import { parseDragEvent, parseTouchEvent, touchEvents } from "./events/EventType";
 import { registerExtraEvents } from "./events/index";
 import registerRippleObserver from "./ripple";
-import { canUseDom, getBlazorId, getDom, getElementSelector } from "./utils/helper";
+import { canUseDom, getBlazorId, getDom, getElementSelector, IN_BROWSER } from "./utils/helper";
 
 window.onload = function () {
  registerExtraEvents();
@@ -1638,4 +1638,19 @@ export function isScrollNearBottom(element: HTMLElement, threshold: number = 200
  return false;
  }
  return element.scrollHeight - (element.scrollTop + element.clientHeight) < threshold;
-}
+}
+
+export function matchesSelector (el: Element | undefined, selector: string): boolean | null {
+ const supportsSelector = IN_BROWSER &&
+ typeof CSS !== 'undefined' &&
+ typeof CSS.supports !== 'undefined' &&
+ CSS.supports(`selector(${selector})`)
+
+ if (!supportsSelector) return false;
+
+ try {
+ return !!el && el.matches(selector)
+ } catch (err) {
+ return false;
+ }
+}

src/Masa.Blazor.JS/src/utils/helper.ts

@@ -1,3 +1,5 @@
+export const IN_BROWSER = typeof window !== 'undefined'
+
 export function addOnceEventListener (
  el: EventTarget,
  eventName: string,
@@ -14,7 +16,7 @@ export function addOnceEventListener (
 
 let passiveSupported = false
 try {
- if (typeof window !== 'undefined') {
+ if (IN_BROWSER) {
  const testListenerOpts = Object.defineProperty({}, 'passive', {
  get: () => {
  passiveSupported = true
@@ -183,7 +185,7 @@ export function getDom(elOrString: Element | string | undefined) {
 }
 
 export const canUseDom = !!(
- typeof window !== 'undefined' &&
+ IN_BROWSER &&
  typeof document !== 'undefined' &&
  window.document &&
  window.document.createElement

src/Masa.Blazor/Components/Switch/MSwitch.razor

@@ -15,12 +15,12 @@
  {
  var trackStyle = GetStyleBuilder().AddBackgroundColor(ComputedTrackColor).Build();
 
- <div class="@ControlBlock.Element("wrapper")">
+ <div class="@ControlWrapper.Name">
  <div class="@_trackModifierBuilder.AddTextColor(CurrentColor).AddBackgroundColor(ComputedTrackColor).AddTheme(IsDark, IndependentTheme)"
  style="@trackStyle">
  </div>
 
- <div class="@ControlBlock.Element("input")" ripple>
+ <div class="@ControlInputClasses" ripple="@Ripple">
  @GenSelection()
  </div>
 

src/Masa.Blazor/Components/Switch/MSwitch.razor.cs

@@ -26,7 +26,7 @@ public partial class MSwitch<TValue> : MSelectable<TValue> where TValue : notnul
  public string? TrackColor { get; set; }
 
  public override bool HasColor => IsActive || HasText;
- 
+
  public string? ComputedTrackColor => HasText ? TrackColor ?? ValidationState : null;
 
  // according to spec, should still show
@@ -70,7 +70,6 @@ protected override void OnInternalValueChange(TValue val)
  private ModifierBuilder _modifierBuilder = _block.CreateModifierBuilder();
  private static ModifierBuilder _trackModifierBuilder = _block.Element("track").CreateModifierBuilder();
  private static ModifierBuilder _thumbModifierBuilder = _block.Element("thumb").CreateModifierBuilder();
-
 
  protected override IEnumerable<string> BuildComponentClass()
  {
@@ -84,5 +83,13 @@ protected override IEnumerable<string> BuildComponentClass()
  }
  );
  }
+
+ protected override async Task HandleOnKeyDown(KeyboardEventArgs args)
+ {
+ if ((args.Key == "ArrowLeft" && IsActive) || (args.Key == "ArrowRight" && !IsActive))
+ {
+ await HandleOnChange();
+ }
+ }
  }
 }

src/Masa.Blazor/JSInterop/JsInteropConstants.cs

@@ -175,4 +175,6 @@ public static class JsInteropConstants
  /// Arguments: element, threshold
  /// </summary>
  public static string IsScrollNearBottom => $"{JsInteropFuncNamePrefix}isScrollNearBottom";
+
+ public static string MatchesSelector => $"{JsInteropFuncNamePrefix}matchesSelector";
 }

src/Masa.Blazor/Mixins/Selectable/MSelectable.razor

@@ -6,11 +6,9 @@
 
 @code {
 
- private string? RippleState => !IsDisabled && !string.IsNullOrWhiteSpace(ValidationState) ? ValidationState : null;
-
  protected override RenderFragment GenDefaultSlot() => __builder =>
  {
- <div class="@ControlBlock.Element("input")" ripple>
+ <div class="@ControlInputClasses" ripple="@Ripple">
  @GenSelection()
  </div>
  @GenLabel(false, true)
@@ -31,7 +29,8 @@
  @onchange="@HandleOnChange"
  @onfocus="@HandleOnFocus"
  @onkeydown="@HandleOnKeyDown"
- @attributes="@Attributes"/>
+ @attributes="@Attributes"
+ @ref="@InputElement"/>
  };
 
 }

src/Masa.Blazor/Mixins/Selectable/MSelectable.razor.cs

@@ -16,9 +16,11 @@ public partial class MSelectable<TValue> : MInput<TValue> where TValue : notnull
 
  [Parameter] public TValue FalseValue { get; set; } = default!;
 
+ private bool _focusVisible;
+
  public override bool HasColor => IsActive;
 
- public override string? ComputedColor => Color ?? (IsDark && !AppIsDark ? "white" : "primary");
+ public override string? ComputedColor => Color;
 
  private bool IsCustomValue => IsDirtyParameter(nameof(TrueValue)) && IsDirtyParameter(nameof(FalseValue));
 
@@ -80,38 +82,43 @@ public async Task HandleOnChange()
  public async Task HandleOnBlur(FocusEventArgs args)
  {
  IsFocused = false;
+ _focusVisible = false;
 
  await Task.CompletedTask;
  }
 
  public async Task HandleOnFocus(FocusEventArgs args)
  {
  IsFocused = true;
-
- await Task.CompletedTask;
+ _focusVisible = await Js.InvokeAsync<bool>(JsInteropConstants.MatchesSelector, InputElement, ":focus-visible");
  }
 
- public Task HandleOnKeyDown(KeyboardEventArgs args)
+ protected virtual Task HandleOnKeyDown(KeyboardEventArgs args)
  {
  return Task.CompletedTask;
  }
 
 #if NET8_0_OR_GREATER
-  protected override void OnParametersSet()
-  {
-  base.OnParametersSet();
+ protected override void OnParametersSet()
+ {
+ base.OnParametersSet();
 
- if (MasaBlazor.IsSsr && !IndependentTheme)
- {
- CascadingIsDark = MasaBlazor.Theme.Dark;
- }
+ if (MasaBlazor.IsSsr && !IndependentTheme)
+ {
+ CascadingIsDark = MasaBlazor.Theme.Dark;
  }
+ }
 #endif
 
  protected static Block ControlBlock => new("m-input--selection-controls");
+ protected static BemIt.Element ControlWrapper => ControlBlock.Element("wrapper");
+
+ private ModifierBuilder _controlInputModifierBuilder = ControlBlock.Element("input").CreateModifierBuilder();
+
+ protected string ControlInputClasses => _controlInputModifierBuilder.Add(_focusVisible).Build();
 
  protected override IEnumerable<string> BuildComponentClass()
  {
- return base.BuildComponentClass().Concat(new[] { ControlBlock.Name });
+ return base.BuildComponentClass().Concat([ControlBlock.Name]);
  }
 }

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -1582,9 +1582,9 @@ html.m-overlay-scroll-blocked {
  cursor: pointer;
 }
 
-/* switch */
+/* switch/checkbox */
 
-.m-input--is-focused .m-input--selection-controls__input::before {
+.m-input--is-focused .m-input--selection-controls__input--focus-visible::before {
  opacity: 0.12;
 }
 
@@ -1708,8 +1708,12 @@ html.m-overlay-scroll-blocked {
  margin-inline-end: 2px;
 }
 
-/* slider */
+.m-select-list .m-list-item__action > .m-simple-checkbox .m-input--selection-controls__input {
+ height: auto;
+ width: auto;
+}
 
+/* slider */
 .m-slider__track-background {
  opacity: 0.38;
 }