Merge pull request #4 from thejackshelton/feat/select-dev

Feat/select dev

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

@@ -14,7 +14,7 @@ export type Opt = {
 */
 export const Select: FunctionComponent<SelectProps> = (props) => {
   const { children: myChildren, ...rest } = props;
-  let valuePropIndex = 0;
+  let valuePropIndex = null;
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
   ) as Array<JSXNode>;
@@ -74,7 +74,8 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
     }
   }
   const isDisabledArr = opts.map((opt) => opt.isDisabled);
-  if (isDisabledArr[valuePropIndex] === true) {
+
+  if (valuePropIndex !== null && isDisabledArr[valuePropIndex] === true) {
     valuePropIndex = isDisabledArr.findIndex((isDisabled) => isDisabled === false);
     if (valuePropIndex === -1) {
       throw new Error(
@@ -83,8 +84,15 @@ 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}>
+    <SelectImpl {...rest} _valuePropIndex={valuePropIndex} _options={opts}>
       {props.children}
     </SelectImpl>
   );

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-trigger.tsx

@@ -1,15 +1,9 @@
 import { component$, type PropsOf, useContext, sync$, $, Slot } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import { getNextEnabledOptionIndex, getPrevEnabledOptionIndex } from './utils';
-
-export type OptionsType = {
-  element: HTMLLIElement;
-  isDisabled: boolean;
-}[];
 export type OpenKeys = 'ArrowUp' | 'Enter' | 'Space' | 'ArrowDown';
 
 type SelectTriggerProps = PropsOf<'button'>;
-export type DisabledArr = Array<{ disabled: boolean }>;
 export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   const context = useContext(SelectContextId);
   const openKeys = ['ArrowUp', 'ArrowDown'];
@@ -30,17 +24,7 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
   const handleKeyDown$ = $((e: KeyboardEvent) => {
     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');
-      }
-
-      const isDisabled = option.value.ariaDisabled === 'true';
-
-      return { element: option.value, isDisabled };
-    });
+    if (!context.options) return;
 
     if (shouldOpen) {
       context.isListboxOpenSig.value = true;
@@ -51,32 +35,35 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (e.key === 'Home') {
-      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, options);
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, context.options);
     }
 
     if (e.key === 'End') {
-      const lastEnabledOptionIndex = getPrevEnabledOptionIndex(options.length, options);
+      const lastEnabledOptionIndex = getPrevEnabledOptionIndex(
+        context.options.length,
+        context.options,
+      );
       context.highlightedIndexSig.value = lastEnabledOptionIndex;
     }
 
     /** When initially opening the listbox, we want to grab the first enabled option index */
     if (context.highlightedIndexSig.value === null) {
-      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, options);
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, context.options);
       return;
     }
 
     if (context.isListboxOpenSig.value && !shouldOpen) {
       if (e.key === 'ArrowDown') {
         context.highlightedIndexSig.value = getNextEnabledOptionIndex(
           context.highlightedIndexSig.value,
-          options,
+          context.options,
         );
       }
 
       if (e.key === 'ArrowUp') {
         context.highlightedIndexSig.value = getPrevEnabledOptionIndex(
           context.highlightedIndexSig.value,
-          options,
+          context.options,
         );
       }
 

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

@@ -3,16 +3,21 @@ 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.selectedIndexSig.value !== null
+      ? context.options[context.selectedIndexSig.value].value
+      : props.placeholder;
 
   return (
     <span data-value {...props}>
-      {selectedOptStr ?? context.value ?? props.placeholder}
+      {selectedOptStr}
     </span>
   );
 });

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,

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

@@ -1,6 +1,6 @@
-import { OptionsType } from './select-trigger';
+import { type Opt } from './select-inline';
 
-export const getNextEnabledOptionIndex = (index: number, options: OptionsType) => {
+export const getNextEnabledOptionIndex = (index: number, options: Opt[]) => {
   let offset = 1;
   let currentIndex = index;
   const opts = options;
@@ -21,7 +21,7 @@ export const getNextEnabledOptionIndex = (index: number, options: OptionsType) =
   return (currentIndex + offset) % len;
 };
 
-export const getPrevEnabledOptionIndex = (index: number, options: OptionsType) => {
+export const getPrevEnabledOptionIndex = (index: number, options: Opt[]) => {
   let offset = 1;
   let currentIndex = index;
   const opts = options;