get the first item focused

Author: thejackshelton

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

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

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

@@ -34,8 +34,9 @@ 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$ } = useSelect();
+  const { selectionManager$, getNextEnabledItemIndex$ } = useSelect();
 
   const isSelectedSig = useComputed$(() => {
     const index = _index ?? null;
@@ -46,14 +47,20 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
     return !disabled && context.highlightedIndexSig.value === _index;
   });
 
-  useTask$(function getIndexTask() {
+  useTask$(async function getIndexTask() {
     if (_index === undefined)
       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$(function scrollableTask({ track, cleanup }) {
+  useTask$(async function scrollableTask({ track, cleanup }) {
     track(() => context.highlightedIndexSig.value);
 
     if (isServer) return;
@@ -81,6 +88,8 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
         observer.observe(itemRef.value);
       }
     }
+
+    if (!isInitialFocusSig.value) return;
   });
 
   const handleClick$ = $(async () => {
@@ -124,7 +133,7 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
       data-selected={isSelectedSig.value ? '' : undefined}
       data-highlighted={isHighlightedSig.value ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      data-item
+      data-item={_index}
       role="option"
     >
       <Slot />

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

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

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

@@ -134,7 +134,15 @@ 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) {
-      context.highlightedIndexSig.value = await getNextEnabledItemIndex$(-1);
+      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();
+      }
+
       return;
     }
   });