refactor(select): attempt at refactoring up duplicate code

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/wrong-value.tsx

@@ -14,7 +14,7 @@ export default component$(() => {
     <>
       <Select value="Jessi" class="relative min-w-40">
         <SelectTrigger class="w-full border-2 border-dashed border-red-400">
-          <SelectValue placeholder="Select an option" />
+          <SelectValue placeholder="wrong value placeholder" />
         </SelectTrigger>
         <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
           {usersSig.value.map((user) => (

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

@@ -23,9 +23,7 @@ export function createTestDriver<T extends DriverLocator>(locator: T) {
     // annoyingly, it seems we need to check if the listbox is hidden in playwright, or else the value does not update
     await expect(getListbox()).toBeHidden();
 
-    return await getTrigger()
-      .locator('[data-value]', { includeHidden: true })
-      .textContent();
+    return await getTrigger().locator('[data-value]').textContent();
   };
 
   const openListbox = async (key: OpenKeys | 'click') => {

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

@@ -383,6 +383,7 @@ test.describe('Keyboard Behavior', () => {
       await getTrigger().press('Enter');
 
       const value = await getValue();
+      console.log(value);
       expect(optStr).toEqual(value);
     });
 

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

@@ -12,8 +12,6 @@ export type SelectContext = {
   triggerRef: Signal<HTMLButtonElement | undefined>;
   popoverRef: Signal<HTMLElement | undefined>;
   listboxRef: Signal<HTMLUListElement | undefined>;
-  optionRefsArray: Signal<Array<Signal<HTMLLIElement | undefined>>>;
-  selectedOptionRef: Signal<HTMLLIElement | null>;
 
   // core state
   options: Opt[] | undefined;

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

@@ -83,6 +83,13 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
     }
   }
 
+  // const isMatch = opts[valuePropIndex].value === props.value;
+
+  // if (!isMatch && props.value) {
+  //   const obj = opts[valuePropIndex];
+  //   obj.value = '';
+  //   opts[valuePropIndex] = obj;
+  // }
   return (
     <SelectImpl {...rest} _valuePropIndex={valuePropIndex} _options={opts}>
       {props.children}

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

@@ -35,8 +35,6 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
       throw Error('Qwik UI: Select component option cannot find its proper index.');
 
     localIndexSig.value = index;
-
-    context.optionRefsArray.value[index] = optionRef;
   });
 
   const handleClick$ = $(() => {

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

@@ -3,13 +3,14 @@ import { component$, useContext, type PropsOf } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 
 type SelectValueProps = PropsOf<'span'> & {
-  placeholder: string;
+  placeholder?: string;
 };
 
 export const SelectValue = component$((props: SelectValueProps) => {
   const context = useContext(SelectContextId);
-  const selectedOptStr = context.selectedOptionRef.value?.textContent;
+  if (!context.options) return;
 
+  const selectedOptStr = context.options[context.selectedIndexSig.value!].value;
   return (
     <span data-value {...props}>
       {selectedOptStr ?? context.value ?? props.placeholder}

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

@@ -4,8 +4,6 @@ import {
   type PropsOf,
   useSignal,
   useContextProvider,
-  type Signal,
-  useTask$,
 } from '@builder.io/qwik';
 import { type SelectContext } from './select-context';
 import SelectContextId from './select-context';
@@ -18,7 +16,7 @@ export type SelectProps = PropsOf<'div'> & {
   _options?: Opt[];
 
   // 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 | null;
 };
 
 /* root component in select-inline.tsx */
@@ -28,30 +26,18 @@ export const SelectImpl = component$<SelectProps>((props) => {
   const triggerRef = useSignal<HTMLButtonElement>();
   const popoverRef = useSignal<HTMLElement>();
   const listboxRef = useSignal<HTMLUListElement>();
-  const optionRefsArray = useSignal<Signal<HTMLLIElement>[]>([]);
   const value = props.value;
   const options = props._options;
 
   // core state
-  const selectedIndexSig = useSignal<number | null>(null);
-  const selectedOptionRef = useSignal<HTMLLIElement | null>(null);
+  const selectedIndexSig = useSignal<number | null>(props._valuePropIndex ?? null);
   const isListboxOpenSig = useSignal<boolean>(false);
   const highlightedIndexSig = useSignal<number | null>(props._valuePropIndex ?? null);
 
-  useTask$(function deriveSelectedRef({ track }) {
-    track(() => selectedIndexSig.value);
-
-    if (selectedIndexSig.value !== null) {
-      selectedOptionRef.value = optionRefsArray.value[selectedIndexSig.value].value;
-    }
-  });
-
   const context: SelectContext = {
     triggerRef,
     popoverRef,
     listboxRef,
-    selectedOptionRef,
-    optionRefsArray,
     options,
     highlightedIndexSig,
     isListboxOpenSig,