navigating

Author: thejackshelton

packages/kit-headless/src/components/select/select-item.tsx

@@ -36,15 +36,23 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
   const itemId = `${context.localId}-${_index}`;
   const isInitialFocusSig = useSignal<boolean>(true);
 
-  const { selectionManager$, getNextEnabledItemIndex$ } = useSelect();
+  const { selectionManager$, getNextEnabledItemIndex$, getPrevEnabledItemIndex$ } =
+    useSelect();
 
   const isSelectedSig = useComputed$(() => {
     const index = _index ?? null;
     return !disabled && context.selectedIndexSetSig.value.has(index!);
   });
 
   const isHighlightedSig = useComputed$(() => {
-    return !disabled && context.highlightedIndexSig.value === _index;
+    if (disabled) return;
+
+    if (context.highlightedIndexSig.value === _index) {
+      itemRef.value?.focus();
+      return true;
+    } else {
+      return false;
+    }
   });
 
   useTask$(async function getIndexTask() {
@@ -118,13 +126,55 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
     isSelectedSig,
   };
 
+  const handleKeyDown$ = $(async (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowDown':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(
+            context.highlightedIndexSig.value!,
+          );
+          if (context.multiple && e.shiftKey) {
+            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
+          }
+        }
+        break;
+
+      case 'ArrowUp':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getPrevEnabledItemIndex$(
+            context.highlightedIndexSig.value!,
+          );
+          if (context.multiple && e.shiftKey) {
+            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
+          }
+        }
+        break;
+
+      case 'Home':
+        if (context.isListboxOpenSig.value) {
+          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
+        }
+        break;
+
+      case 'End':
+        if (context.isListboxOpenSig.value) {
+          const lastEnabledOptionIndex = await getPrevEnabledItemIndex$(
+            context.itemsMapSig.value.size,
+          );
+          context.highlightedIndexSig.value = lastEnabledOptionIndex;
+        }
+        break;
+    }
+  });
+
   useContextProvider(selectItemContextId, selectContext);
 
   return (
     <li
       {...rest}
       id={itemId}
       onClick$={[handleClick$, props.onClick$]}
+      onKeyDown$={[handleKeyDown$, props.onKeyDown$]}
       onPointerOver$={[handlePointerOver$, props.onPointerOver$]}
       ref={itemRef}
       tabIndex={-1}

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -56,52 +56,18 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
           : !context.isListboxOpenSig.value;
         break;
 
-      case 'ArrowDown':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(
-            context.highlightedIndexSig.value!,
-          );
-          if (context.multiple && e.shiftKey) {
-            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
-          }
-        } else {
-          context.isListboxOpenSig.value = true;
-        }
+      case 'Tab':
+      case 'Escape':
+        context.isListboxOpenSig.value = false;
         break;
 
+      case 'ArrowDown':
       case 'ArrowUp':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getPrevEnabledItemIndex$(
-            context.highlightedIndexSig.value!,
-          );
-          if (context.multiple && e.shiftKey) {
-            await selectionManager$(context.highlightedIndexSig.value, 'toggle');
-          }
-        } else {
+        if (!context.isListboxOpenSig.value) {
           context.isListboxOpenSig.value = true;
         }
         break;
 
-      case 'Home':
-        if (context.isListboxOpenSig.value) {
-          context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
-        }
-        break;
-
-      case 'End':
-        if (context.isListboxOpenSig.value) {
-          const lastEnabledOptionIndex = await getPrevEnabledItemIndex$(
-            context.itemsMapSig.value.size,
-          );
-          context.highlightedIndexSig.value = lastEnabledOptionIndex;
-        }
-        break;
-
-      case 'Tab':
-      case 'Escape':
-        context.isListboxOpenSig.value = false;
-        break;
-
       case 'ArrowRight':
         if (!context.multiple) {
           const currentIndex = context.highlightedIndexSig.value ?? -1;