Fix ComboboxMulti not clearing search when clicking on an item

.changeset/nine-beds-yawn.md

@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Fix ComboboxMulti not clearing search when clicking on an item

design-system/pkg/src/combobox/test/Combobox.test.tsx

@@ -4,7 +4,7 @@ import { beforeAll, expect, vi, describe, it } from 'vitest';
 
 import { act, fireEvent, firePress, renderWithProvider } from '#test-utils';
 
-import { Combobox, Item } from '..';
+import { Combobox, ComboboxMulti, Item } from '..';
 
 let onChange = vi.fn();
 let onOpenChange = vi.fn();
@@ -143,4 +143,45 @@ describe('combobox/Combobox', () => {
     expect(onOpenChange).not.toHaveBeenCalled();
     expect(onInputChange).not.toHaveBeenCalled();
   });
+
+  it('clears a multi combobox input when an item is pressed', function () {
+    onInputChange.mockClear();
+    let { getByRole } = renderWithProvider(
+      <ComboboxMulti label="Test" onInputChange={onInputChange}>
+        <Item key="one">Item one</Item>
+        <Item key="two">Item two</Item>
+      </ComboboxMulti>
+    );
+
+    let combobox = getByRole('combobox') as HTMLInputElement;
+    fireEvent.change(combobox, { target: { value: 'Item' } });
+    act(() => vi.runAllTimers());
+    expect(combobox).toHaveValue('Item');
+
+    firePress(getByRole('option', { name: 'Item one' }));
+
+    expect(combobox).toHaveValue('');
+    expect(onInputChange).toHaveBeenLastCalledWith('');
+  });
+
+  it('clears a multi combobox input when an item is selected with Enter', function () {
+    onInputChange.mockClear();
+    let { getByRole } = renderWithProvider(
+      <ComboboxMulti label="Test" onInputChange={onInputChange}>
+        <Item key="one">Item one</Item>
+        <Item key="two">Item two</Item>
+      </ComboboxMulti>
+    );
+
+    let combobox = getByRole('combobox') as HTMLInputElement;
+    fireEvent.change(combobox, { target: { value: 'Item' } });
+    act(() => vi.runAllTimers());
+    expect(combobox).toHaveValue('Item');
+
+    fireEvent.keyDown(combobox, { key: 'ArrowDown' });
+    fireEvent.keyDown(combobox, { key: 'Enter' });
+
+    expect(combobox).toHaveValue('');
+    expect(onInputChange).toHaveBeenLastCalledWith('');
+  });
 });

design-system/pkg/src/combobox/useComboboxMulti.ts

@@ -142,9 +142,6 @@ export function useComboboxMulti<T extends object>(
         if (state.selectionManager.focusedKey) {
           state.selectionManager.select(state.selectionManager.focusedKey);
         }
-
-        // Clear the input value after selection but keep the menu open
-        state.setInputValue('');
         break;
       case 'Escape':
         // Propagate the event when closed, assume the intent is to dismiss a

design-system/pkg/src/combobox/useComboboxMultiState.ts

@@ -58,9 +58,18 @@ export function useComboboxMultiState<T extends object>(
 ): ComboboxMultiState<T> {
   let { allowsEmptyCollection = false, menuTrigger = 'input' } = props;
   let [showAllItems, setShowAllItems] = useState(false);
+  let [inputValue, setInputValue] = useControlledState(
+    props.inputValue,
+    props.defaultInputValue ?? '',
+    props.onInputChange
+  );
   let listState = useListState({
     ...props,
     items: props.items ?? props.defaultItems,
+    onSelectionChange: selection => {
+      props.onSelectionChange?.(selection);
+      setInputValue('');
+    },
     selectionBehavior: 'toggle',
     selectionMode: 'multiple',
   });
@@ -70,11 +79,6 @@ export function useComboboxMultiState<T extends object>(
     isOpen: undefined,
     defaultOpen: undefined,
   });
-  let [inputValue, setInputValue] = useControlledState(
-    props.inputValue,
-    props.defaultInputValue ?? '',
-    props.onInputChange
-  );
   let lastInputValue = usePrevious(inputValue);
 
   // Preserve original collection so we can show all items on demand