fix bug

JerryWu1234 · Oct 24, 2024 · 924a6a7 · 924a6a7
1 parent 80a69b0
commit 924a6a7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/apps/website/src/routes/docs/headless/switch/examples/hero.tsx b/apps/website/src/routes/docs/headless/switch/examples/hero.tsx
@@ -6,7 +6,7 @@ export default component$(() => {
   const checked = useSignal(true)
   useStyles$(styles);
   return (
-    <Switch.Root class="switch"  bind:checked={checked}>
+    <Switch.Root class="switch" bind:checked={checked}>
       <Switch.Label>test</Switch.Label>
       <Switch.Input />
     </Switch.Root>

diff --git a/apps/website/src/routes/docs/headless/switch/snippets/switch.css b/apps/website/src/routes/docs/headless/switch/snippets/switch.css
@@ -74,6 +74,11 @@
         box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 10%);
       }
     }
+
+    &:focus {
+      outline: 2px solid hsl(var(--primary));
+      outline-offset: 2px;
+    }
   }
 }
 

diff --git a/packages/kit-headless/src/components/switch/switch-input.tsx b/packages/kit-headless/src/components/switch/switch-input.tsx
@@ -5,27 +5,15 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
     const context = useContext(SwitchContext)
     const id = useId()
     if(context.defaultChecked && context.bindChecked && !context.bindChecked.value){
-      context.bindChecked.value = true
+      context.bindChecked.value = !context.bindChecked.value
     }
 
     if(context.autoFocus && !context.switchRef?.value){
       context.switchRef?.value?.focus()
     }
 
-
-    const handleKeyDownSync$ = sync$((e: KeyboardEvent) => {
-      if (e.key === ' ') {
-        e.preventDefault();
-      }
-    });
-
-    const handleKeyDown$ = $((e: KeyboardEvent) => {
-      if (e.key === ' ') {
-        context.bindChecked.value = !context.bindChecked.value;
-      }
-    });
-
     const handleClick$ = $((e: MouseEvent | KeyboardEvent) => {
+      context.switchRef?.value?.focus()
       context.bindChecked.value = !context.bindChecked.value;
       if(context.onChange$){
         context.onChange$(context.bindChecked.value, e)
@@ -36,7 +24,9 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
       }
 
     });
-
+    const handleClickSync$ = sync$((e: MouseEvent) => {
+      e.preventDefault();
+    });
     return (
       <input
         data-checked={context.bindChecked?.value ? '' : undefined}
@@ -47,10 +37,9 @@ export const SwitchInput = component$<PropsOf<'input'>>(() => {
         aria-checked={context.bindChecked ? 'true' : 'false'}
         type="checkbox"
         role="switch"
-        onClick$={handleClick$}
+        onClick$={[handleClickSync$, handleClick$]}
         checked={context.bindChecked?.value}
-        onChange$={handleClick$}
-        onKeyDown$={[handleKeyDownSync$, handleKeyDown$]}
+        onChange$={[handleClickSync$,handleClick$]}
         onKeyPress$={handleClick$}
       />
     );