feat(select): dynamic options

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/add-users.tsx

@@ -0,0 +1,44 @@
+import { component$, useSignal, $ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+  const hasAddedUsersSig = useSignal<boolean>(false);
+
+  return (
+    <>
+      <Select class="relative mb-2 min-w-40">
+        <SelectTrigger class="w-full border-2 border-dashed border-red-400">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
+          {usersSig.value.map((user) => (
+            <SelectOption
+              class="border-dashed border-blue-400 data-[highlighted]:border-2"
+              key={user}
+            >
+              {user}
+            </SelectOption>
+          ))}
+        </SelectListbox>
+      </Select>
+      <button
+        class="bg-background border-2 border-dashed border-red-400"
+        onClick$={$(() => {
+          if (!hasAddedUsersSig.value) {
+            usersSig.value = [...usersSig.value, 'John', 'Jane', 'Bob'];
+            hasAddedUsersSig.value = true;
+          }
+        })}
+      >
+        Add Users
+      </button>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/select/index.mdx

@@ -40,6 +40,12 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="controlled" />
 </div>
 
+## Adding Users
+
+<div data-testid="select-add-users-test">
+  <Showcase name="add-users" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

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

@@ -5,10 +5,11 @@ async function setup(page: Page, selector: string) {
 
   const driver = createTestDriver(page.getByTestId(selector));
 
-  const { getListbox, getTrigger, getOptions, getValue, openListbox } = driver;
+  const { getRoot, getListbox, getTrigger, getOptions, getValue, openListbox } = driver;
 
   return {
     driver,
+    getRoot,
     getListbox,
     getTrigger,
     getOptions,
@@ -85,6 +86,26 @@ test.describe('Mouse Behavior', () => {
     await expect(options[2]).toHaveAttribute('aria-selected', 'true');
     expect(thirdOptStr).toEqual(await getValue());
   });
+
+  test(`GIVEN a select
+        WHEN adding new users and selecting a new user
+        THEN the new user should be the selected value`, async ({ page }) => {
+    const { getRoot, getOptions, openListbox, getValue } = await setup(
+      page,
+      'select-add-users-test',
+    );
+
+    const sibling = getRoot().locator('+ button');
+
+    await expect(sibling).toHaveText('Add Users');
+    await sibling.click();
+
+    await openListbox('click');
+    const options = await getOptions();
+    await expect(options[7]).toHaveText('Bob');
+    await options[7].click();
+    expect(await getValue()).toEqual(await options[7].textContent());
+  });
 });
 
 test.describe('Keyboard Behavior', () => {

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

@@ -14,7 +14,7 @@ export type SelectContext = {
   listboxRef: Signal<HTMLUListElement | undefined>;
 
   // core state
-  options: Opt[] | undefined;
+  optionsSig: Signal<Opt[] | undefined>;
   highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
   selectedIndexSig: Signal<number | null>;

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

@@ -24,7 +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);
-    if (!context.options) return;
+    if (!context.optionsSig.value) return;
 
     if (shouldOpen) {
       context.isListboxOpenSig.value = true;
@@ -35,35 +35,41 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (e.key === 'Home') {
-      context.highlightedIndexSig.value = getNextEnabledOptionIndex(-1, context.options);
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(
+        -1,
+        context.optionsSig.value,
+      );
     }
 
     if (e.key === 'End') {
       const lastEnabledOptionIndex = getPrevEnabledOptionIndex(
-        context.options.length,
-        context.options,
+        context.optionsSig.value.length,
+        context.optionsSig.value,
       );
       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, context.options);
+      context.highlightedIndexSig.value = getNextEnabledOptionIndex(
+        -1,
+        context.optionsSig.value,
+      );
       return;
     }
 
     if (context.isListboxOpenSig.value && !shouldOpen) {
       if (e.key === 'ArrowDown') {
         context.highlightedIndexSig.value = getNextEnabledOptionIndex(
           context.highlightedIndexSig.value,
-          context.options,
+          context.optionsSig.value,
         );
       }
 
       if (e.key === 'ArrowUp') {
         context.highlightedIndexSig.value = getPrevEnabledOptionIndex(
           context.highlightedIndexSig.value,
-          context.options,
+          context.optionsSig.value,
         );
       }
 

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

@@ -8,11 +8,11 @@ type SelectValueProps = PropsOf<'span'> & {
 
 export const SelectValue = component$((props: SelectValueProps) => {
   const context = useContext(SelectContextId);
-  if (!context.options) return;
+  if (!context.optionsSig.value) return;
 
   const selectedOptStr =
     context.selectedIndexSig.value !== null
-      ? context.options[context.selectedIndexSig.value].value
+      ? context.optionsSig.value[context.selectedIndexSig.value].value
       : props.placeholder;
 
   return (

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

@@ -6,6 +6,7 @@ import {
   useContextProvider,
   Signal,
   useTask$,
+  useComputed$,
 } from '@builder.io/qwik';
 import { type SelectContext } from './select-context';
 import SelectContextId from './select-context';
@@ -30,8 +31,15 @@ export const SelectImpl = component$<SelectProps>((props) => {
   const popoverRef = useSignal<HTMLElement>();
   const listboxRef = useSignal<HTMLUListElement>();
 
-  const options = props._options;
-  const optionsIndex = new Map(options.map((option, index) => [option.value, index]));
+  /**
+   * Updates the options when the options change
+   * (for example, when a new option is added)
+   **/
+  const optionsSig = useComputed$(() => props._options);
+
+  const optionsIndexMap = new Map(
+    optionsSig.value?.map((option, index) => [option.value, index]),
+  );
 
   // core state
   const selectedIndexSig = useSignal<number | null>(props._valuePropIndex ?? null);
@@ -40,9 +48,10 @@ export const SelectImpl = component$<SelectProps>((props) => {
 
   // Maps are apparently great for this index accessing. Will learn more about them this week and refactor this to have a more consistent API and eliminate redundancy / duplication.
   useTask$(({ track }) => {
-    const bindValue = track(() => props['bind:value']?.value);
+    const controlledValue = track(() => props['bind:value']?.value);
+    if (!controlledValue) return;
 
-    const matchingIndex = optionsIndex.get(bindValue) ?? -1;
+    const matchingIndex = optionsIndexMap.get(controlledValue) ?? -1;
     if (matchingIndex !== -1) {
       selectedIndexSig.value = matchingIndex;
       highlightedIndexSig.value = matchingIndex;
@@ -53,7 +62,7 @@ export const SelectImpl = component$<SelectProps>((props) => {
     triggerRef,
     popoverRef,
     listboxRef,
-    options,
+    optionsSig,
     highlightedIndexSig,
     isListboxOpenSig,
     selectedIndexSig,