grabs correct highlighted ref on server

Author: thejackshelton

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

@@ -62,9 +62,14 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
     localIndexSig.value = _index;
   });
 
-  useTask$(async function scrollableTask({ track, cleanup }) {
+  useTask$(async function navigationTask({ track, cleanup }) {
     track(() => context.highlightedIndexSig.value);
 
+    // update the context with the highlighted item ref
+    if (localIndexSig.value === context.highlightedIndexSig.value) {
+      context.highlightedItemRef = itemRef;
+    }
+
     if (isServer) return;
 
     let observer: IntersectionObserver;
@@ -90,11 +95,6 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
         observer.observe(itemRef.value);
       }
     }
-
-    // update the context with the highlighted item ref
-    if (localIndexSig.value === context.highlightedIndexSig.value) {
-      context.highlightedItemRef = itemRef;
-    }
   });
 
   const handleClick$ = $(async () => {
@@ -222,7 +222,7 @@ export const HSelectItem = component$<SelectItemProps>((props) => {
       data-selected={isSelectedSig.value ? '' : undefined}
       data-highlighted={isHighlightedSig.value ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      data-item={_index}
+      data-item
       role="option"
     >
       <Slot />