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

…keyboard (#2086)

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

* missing a change

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;
 }