focus highlighted only

Author: thejackshelton

packages/kit-headless/src/components/select/select-context.ts

@@ -14,7 +14,7 @@ export type SelectContext = {
   listboxRef: Signal<HTMLUListElement | undefined>;
   groupRef: Signal<HTMLDivElement | undefined>;
   labelRef: Signal<HTMLDivElement | undefined>;
-  firstEnabledItemRef: Signal<HTMLLIElement | undefined>;
+  highlightedItemRef: Signal<HTMLLIElement | undefined>;
 
   // core state
   itemsMapSig: Readonly<Signal<TItemsMap>>;

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

@@ -35,7 +35,6 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
   const itemRef = useSignal<HTMLLIElement>();
   const localIndexSig = useSignal<number | null>(null);
   const itemId = `${context.localId}-${_index}`;
-  const isInitialFocusSig = useSignal<boolean>(true);
 
   const { selectionManager$, getNextEnabledItemIndex$, getPrevEnabledItemIndex$ } =
     useSelect();
@@ -61,12 +60,6 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
       throw Error('Qwik UI: Select component item cannot find its proper index.');
 
     localIndexSig.value = _index;
-
-    // update the context with the first enabled item ref
-    const firstEnabledIndex = await getNextEnabledItemIndex$(-1);
-    if (localIndexSig.value === firstEnabledIndex) {
-      context.firstEnabledItemRef = itemRef;
-    }
   });
 
   useTask$(async function scrollableTask({ track, cleanup }) {
@@ -98,7 +91,10 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
       }
     }
 
-    if (!isInitialFocusSig.value) return;
+    // update the context with the highlighted item ref
+    if (localIndexSig.value === context.highlightedIndexSig.value) {
+      context.highlightedItemRef = itemRef;
+    }
   });
 
   const handleClick$ = $(async () => {

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

@@ -161,7 +161,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
     const currDisplayValueSig = useSignal<string | string[]>();
 
     const initialLoadSig = useSignal<boolean>(true);
-    const firstEnabledItemRef = useSignal<HTMLLIElement>();
+    const highlightedItemRef = useSignal<HTMLLIElement>();
 
     const context: SelectContext = {
       itemsMapSig,
@@ -171,7 +171,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       listboxRef,
       labelRef,
       groupRef,
-      firstEnabledItemRef,
+      highlightedItemRef,
       localId,
       highlightedIndexSig,
       selectedIndexSetSig,

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

@@ -100,16 +100,13 @@ export const HSelectTrigger = component$<SelectTriggerProps>((props) => {
 
     /** When initially opening the listbox, we want to grab the first enabled option index */
     if (context.highlightedIndexSig.value === null) {
-      const firstItem = await getNextEnabledItemIndex$(-1);
-      context.highlightedIndexSig.value = firstItem;
-
-      // Wait for the popover code to be executed
-      while (!(context.firstEnabledItemRef.value === document.activeElement)) {
-        await new Promise((resolve) => setTimeout(resolve, 5));
-        context.firstEnabledItemRef.value?.focus();
-      }
+      context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
+    }
 
-      return;
+    // Wait for the popover code to be executed
+    while (context.highlightedItemRef.value !== document.activeElement) {
+      await new Promise((resolve) => setTimeout(resolve, 5));
+      context.highlightedItemRef.value?.focus();
     }
   });