fix(select): grab correct selected option based on value prop

Author: thejackshelton

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -508,15 +508,15 @@ test.describe('Props', () => {
     await expect(await getValue()).toEqual('Jessie');
   });
 
-  // test(`GIVEN an uncontrolled select with a value prop on the root component
-  //       WHEN the value data matches the fourth option
-  //       THEN the fourth option should have aria-selected set to true`, async ({
-  //   page,
-  // }) => {
-  //   const { getValue, getOptions } = await setup(page, 'select-uncontrolled-test');
-
-  //   await expect(await getValue()).toEqual('Jessie');
-  //   const options = await getOptions();
-  //   await expect(await options[3]).toBeSelected();
-  // });
+  test(`GIVEN an uncontrolled select with a value prop on the root component
+        WHEN the value data matches the fourth option
+        THEN the fourth option should have data-highlighted set to true`, async ({
+    page,
+  }) => {
+    const { getValue, getOptions } = await setup(page, 'select-uncontrolled-test');
+
+    await expect(await getValue()).toEqual('Jessie');
+    const options = await getOptions();
+    await expect(await options[3]).toHaveAttribute('data-highlighted');
+  });
 });

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

@@ -10,7 +10,7 @@ import { SelectOption } from './select-option';
 export const Select: FunctionComponent<SelectProps> = (props) => {
   const { children: myChildren, ...rest } = props;
   let valuePropIndex = 0;
-
+  const isDisabledArr = [];
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
   ) as Array<JSXNode>;
@@ -49,11 +49,17 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
         if (child.props.children === props.value) {
           valuePropIndex = currentIndex;
         }
-
+        isDisabledArr.push(child.props.disabled);
         currentIndex++;
       }
     }
   }
+
+  // TODO: will have problems if all options are disabled
+  if (isDisabledArr[valuePropIndex] === true) {
+    valuePropIndex = isDisabledArr.findIndex((isDisabled) => isDisabled === false);
+  }
+
   return (
     <SelectImpl {...rest} valuePropIndex={valuePropIndex}>
       {props.children}

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

@@ -31,6 +31,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     const shouldOpen = !context.isListboxOpenSig.value && openKeys.includes(e.key);
     const shouldClose = context.isListboxOpenSig.value && closedKeys.includes(e.key);
 
+    // TODO: refactor with data grabbed from inline component
     const options: OptionsType = context.optionRefsArray.value.map((option) => {
       if (option.value === undefined) {
         throw new Error('Qwik UI: internal select option is undefined');

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

@@ -14,7 +14,7 @@ export type SelectProps = PropsOf<'div'> & {
   value?: string;
 
   // when a value is passed, we check if it's an actual option value, and get its index at pre-render time.
-  valuePropIndex: number;
+  valuePropIndex?: number;
 };
 
 /* root component in select-inline.tsx */
@@ -31,7 +31,7 @@ export const SelectImpl = component$<SelectProps>((props) => {
   const selectedIndexSig = useSignal<number | null>(null);
   const selectedOptionRef = useSignal<HTMLLIElement | null>(null);
   const isListboxOpenSig = useSignal<boolean>(false);
-  const highlightedIndexSig = useSignal<number | null>(props.valuePropIndex);
+  const highlightedIndexSig = useSignal<number | null>(props.valuePropIndex ?? null);
 
   useTask$(function deriveSelectedRef({ track }) {
     track(() => selectedIndexSig.value);