APP-3302: add multiple prop to <SearchableSelect> (#478)

Author: mcous

.vscode/settings.json

@@ -27,6 +27,7 @@
     "activedescendant",
     "combobox",
     "listbox",
+    "multiselectable",
     "radiobox",
     "unstub",
     "viamrobotics"

packages/core/src/lib/icon/icons.ts

@@ -29,6 +29,8 @@ export const paths = {
   cancel: MDI.mdiCancel,
   'check-circle': MDI.mdiCheckCircle,
   check: MDI.mdiCheck,
+  'checkbox-blank-outline': MDI.mdiCheckboxBlankOutline,
+  'checkbox-marked': MDI.mdiCheckboxMarked,
   'chevron-double-up': MDI.mdiChevronDoubleUp,
   'chevron-down': MDI.mdiChevronDown,
   'chevron-left': MDI.mdiChevronLeft,

packages/core/src/lib/select/__tests__/searchable-select.spec.ts

@@ -6,13 +6,15 @@ import type { ComponentProps } from 'svelte';
 import { SearchableSelect as Subject, InputStates } from '$lib';
 
 const onChange = vi.fn();
+const onMultiChange = vi.fn();
 const onFocus = vi.fn();
 const onBlur = vi.fn();
 
 const renderSubject = (props: Partial<ComponentProps<Subject>> = {}) => {
   return render(Subject, {
     options: ['hello from', 'the other side'],
     onChange,
+    onMultiChange,
     onFocus,
     onBlur,
     ...props,
@@ -33,8 +35,8 @@ const getResults = (): {
   return { search, button, list, options };
 };
 
-describe('combobox list', () => {
-  it('controls a listbox', () => {
+describe('SearchableSelect', () => {
+  it('is a combobox that controls a listbox', () => {
     renderSubject();
 
     const { search, button, list } = getResults();
@@ -43,6 +45,7 @@ describe('combobox list', () => {
     expect(button).toHaveAttribute('aria-controls', list.id);
     expect(search).toHaveAttribute('aria-controls', list.id);
     expect(search).toHaveAttribute('aria-autocomplete', 'list');
+    expect(search).not.toHaveAttribute('aria-multiselectable');
   });
 
   it('has a placeholder', () => {
@@ -421,6 +424,31 @@ describe('combobox list', () => {
     expect(options[0]).toHaveAttribute('aria-selected', 'true');
   });
 
+  it('selects visually focused option with space', async () => {
+    const user = userEvent.setup();
+    renderSubject();
+
+    const { search } = getResults();
+    await user.click(search);
+    await user.keyboard('{ArrowDown} ');
+
+    expect(onChange).toHaveBeenCalledWith('hello from');
+    expect(search).toHaveValue('hello from');
+    expect(search).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('types with space when visual focus on search', async () => {
+    const user = userEvent.setup();
+    renderSubject();
+
+    const { search } = getResults();
+    await user.click(search);
+    await user.keyboard(' ');
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(search).toHaveValue(' ');
+  });
+
   it('sets cursor with home and end', async () => {
     const user = userEvent.setup();
     renderSubject();
@@ -471,4 +499,78 @@ describe('combobox list', () => {
 
     expect(options[0]).toHaveAttribute('aria-selected', 'true');
   });
+
+  describe('multiple mode', () => {
+    it('can select multiple options without closing', async () => {
+      const user = userEvent.setup();
+      renderSubject({ multiple: true });
+
+      const { search, options } = getResults();
+
+      expect(search).toHaveAttribute('aria-multiselectable', 'true');
+
+      await user.click(search);
+
+      // TODO(mc, 2024-02-03): replace .click with userEvent
+      // https://github.com/testing-library/user-event/issues/1119
+      await act(() => options[0]?.click());
+      expect(onMultiChange).toHaveBeenCalledWith(['hello from']);
+      expect(search).toHaveFocus();
+      expect(search).toHaveValue('');
+      expect(search).toHaveAttribute('aria-expanded', 'true');
+      expect(options[0]).toHaveAttribute('aria-checked', 'true');
+      expect(options[1]).toHaveAttribute('aria-checked', 'false');
+
+      await act(() => options[1]?.click());
+      expect(onMultiChange).toHaveBeenCalledWith([
+        'hello from',
+        'the other side',
+      ]);
+      expect(search).toHaveFocus();
+      expect(search).toHaveValue('');
+      expect(search).toHaveAttribute('aria-expanded', 'true');
+      expect(options[0]).toHaveAttribute('aria-checked', 'true');
+      expect(options[1]).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('can select unselect with the mouse', async () => {
+      const user = userEvent.setup();
+      renderSubject({ multiple: true });
+
+      const { search, options } = getResults();
+
+      await user.click(search);
+
+      // TODO(mc, 2024-02-03): replace .click with userEvent
+      // https://github.com/testing-library/user-event/issues/1119
+      await act(() => options[0]?.click());
+      expect(onMultiChange).toHaveBeenCalledWith(['hello from']);
+      await act(() => options[0]?.click());
+      expect(onMultiChange).toHaveBeenCalledWith([]);
+    });
+
+    it('resets search input on select', async () => {
+      const user = userEvent.setup();
+      renderSubject({ multiple: true });
+
+      const { search } = getResults();
+      await user.click(search);
+
+      await user.type(search, 'hello{Enter}');
+
+      expect(onMultiChange).toHaveBeenCalledWith(['hello from']);
+      expect(search).toHaveValue('');
+    });
+
+    it('closes menu on blur', async () => {
+      const user = userEvent.setup();
+      renderSubject({ multiple: true });
+
+      const { search } = getResults();
+      await user.click(search);
+      await user.keyboard('{Tab}');
+
+      expect(search).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
 });

packages/core/src/lib/select/searchable-select.svelte

@@ -27,6 +27,9 @@ export let options: string[];
 /** The value of the search input or the currently selected option, if any. */
 export let value = '';
 
+/** All selected values, if `multiple` is `true`. */
+export let values: string[] = [];
+
 /** The placeholder of the input. */
 export let placeholder = '';
 
@@ -38,6 +41,9 @@ export let placeholder = '';
  */
 export let exclusive: boolean | ((value: string) => boolean) = false;
 
+/** Multiple selections allowed. */
+export let multiple: boolean | undefined = undefined;
+
 /** Input is disabled. */
 export let disabled = false;
 
@@ -53,9 +59,17 @@ export let otherOptionPrefix = '';
 /** Error message ID, if any. */
 export let errorID = '';
 
-/** Notify the parent of a value change, after Enter key or blur. */
+/**
+ * Notify the parent of a value change, after Enter key or blur.
+ *
+ * Only used if `multiple` is `false` (default)
+ */
 export let onChange: ((value: string) => unknown) | undefined = undefined;
 
+/** Notify the parent of a value change, if `multiple` is `true` */
+export let onMultiChange: ((values: string[]) => unknown) | undefined =
+  undefined;
+
 /** Notify the parent of focus. */
 export let onFocus: ((event: FocusEvent) => unknown) | undefined = undefined;
 
@@ -110,6 +124,34 @@ $: if (typeof activeElement?.scrollIntoView === 'function') {
   activeElement.scrollIntoView({ block: 'nearest' });
 }
 
+const handleSingleSelect = (selectedValue: string | undefined) => {
+  const fallback = exclusive && !valueInSearch ? '' : value;
+  const nextValue = selectedValue ?? fallback;
+
+  if (nextValue !== previousValue) {
+    setMenuState(CLOSED);
+
+    value = nextValue;
+    previousValue = nextValue;
+    onChange?.(nextValue);
+  }
+};
+
+const handleMultiSelect = (selectedValue: string | undefined) => {
+  if (!selectedValue) {
+    return;
+  }
+
+  values = values.includes(selectedValue)
+    ? values.filter((val) => val !== selectedValue)
+    : [...values, selectedValue];
+
+  value = '';
+  onMultiChange?.(values);
+};
+
+$: handleSelect = multiple ? handleMultiSelect : handleSingleSelect;
+
 const setMenuState = (nextMenuState: MenuState) => {
   menuState = disabled ? CLOSED : nextMenuState;
 };
@@ -125,20 +167,8 @@ const handleFocus = (event: FocusEvent) => {
 
 const handleBlur = (event: FocusEvent) => {
   handleSelect(autoSelectOption?.option);
-  onBlur?.(event);
-};
-
-const handleSelect = (selectedValue: string | undefined) => {
-  const fallback = exclusive && !valueInSearch ? '' : value;
-  const nextValue = selectedValue ?? fallback;
-
   setMenuState(CLOSED);
-
-  if (nextValue !== previousValue) {
-    value = nextValue;
-    previousValue = nextValue;
-    onChange?.(nextValue);
-  }
+  onBlur?.(event);
 };
 
 const handleButtonClick = () => {
@@ -150,6 +180,15 @@ const handleKeydown = createHandleKey({
   Enter: () => {
     handleSelect(autoSelectOption?.option);
   },
+  ' ': {
+    handler: (event) => {
+      if (menuState === FOCUS_ITEM) {
+        handleSelect(autoSelectOption?.option);
+        event.preventDefault();
+      }
+    },
+    preventDefault: false,
+  },
   Escape: () => {
     if (menuState === CLOSED) {
       value = '';
@@ -198,6 +237,7 @@ const handleKeydown = createHandleKey({
   isFocused={menuState === FOCUS_ITEM ? false : undefined}
   cx={[{ 'caret-transparent': menuState === FOCUS_ITEM }, inputCx]}
   aria-autocomplete="list"
+  aria-multiselectable={multiple}
   aria-activedescendant={activeID}
   aria-errormessage={errorID}
   on:focus={handleFocus}
@@ -221,7 +261,9 @@ const handleKeydown = createHandleKey({
     class="max-h-36 flex-col overflow-y-auto border border-gray-9 bg-white py-1 shadow-sm"
   >
     {#each allOptions as { option, highlight } (option)}
-      {@const isSelected = activeOption?.option === option}
+      {@const isActive = activeOption?.option === option}
+      {@const isSelected = multiple ? false : isActive}
+      {@const isChecked = multiple ? values.includes(option) : undefined}
       {@const isOther = otherOption?.option === option}
 
       {#if isOther && allOptions.length > 1}
@@ -236,31 +278,38 @@ const handleKeydown = createHandleKey({
       -->
       <li
         role="option"
-        id={isSelected ? activeID : undefined}
+        id={isActive ? activeID : undefined}
         aria-selected={isSelected}
+        aria-checked={isChecked}
         aria-label={isOther
           ? [otherOptionPrefix, option].filter(Boolean).join(' ')
           : option}
         class={cx(
-          'flex h-7.5 w-full cursor-pointer items-center justify-start px-2.5 text-xs',
-          isSelected ? 'bg-light' : 'hover:bg-light'
+          'flex h-7.5 w-full cursor-pointer items-center justify-start text-xs',
+          multiple ? 'pl-2 pr-2.5' : 'px-2.5',
+          isActive ? 'bg-light' : 'hover:bg-light'
         )}
         on:pointerdown|preventDefault
         on:mousedown|preventDefault
         on:click={() => handleSelect(option)}
         bind:this={optionElements[option]}
       >
+        {#if multiple}
+          <Icon
+            cx={['mr-1 shrink-0', !isChecked && 'text-gray-6']}
+            name={isChecked ? 'checkbox-marked' : 'checkbox-blank-outline'}
+          />
+        {/if}
         {#if isOther}
           <Icon
             cx="mr-1 shrink-0 text-gray-6"
             name="plus"
           />
         {/if}
-        <p class="truncate">
+        <p class="truncate whitespace-pre">
           {#if highlight !== undefined}
-            <span class="whitespace-pre">{highlight[0]}</span>
-            <span class="whitespace-pre bg-yellow-100">{highlight[1]}</span>
-            <span class="whitespace-pre">{highlight[2]}</span>
+            {@const [prefix, match, suffix] = highlight}
+            {prefix}<span class="bg-yellow-100">{match}</span>{suffix}
           {:else if isOther && otherOptionPrefix}
             {otherOptionPrefix} {option}
           {:else}

packages/core/src/routes/+page.svelte

@@ -1301,6 +1301,7 @@ const onHoverDelayMsInput = (event: Event) => {
       ]}
       placeholder="Reducing Select"
       sort="reduce"
+      multiple
     />
   </div>
 

packages/storybook/src/stories/select.mdx

@@ -41,5 +41,5 @@ import { Multiselect } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>
-  <Story of={SelectStories.Multi} />
+  <Story of={SelectStories.SearchableWithMultiple} />
 </Canvas>