Merge pull request #825 from equinor/fix/combobox-on-add-items

🐛 Fix form onSubmit being called when hitting {Enter} inside of Select components

src/atoms/hooks/useSelect.ts

@@ -186,6 +186,7 @@ const useSelect = <T extends SelectOptionRequired>(
       'onAddItem' in props &&
       props.onAddItem
     ) {
+      event.preventDefault();
       props.onAddItem(search);
       setSearch('');
     } else if (event.key === 'Space' || event.key === 'Enter') {

src/molecules/Select/ComboBox/ComboBox.stories.tsx

@@ -221,6 +221,7 @@ export const ComboBoxInDialog: StoryFn = (args) => {
 };
 
 export const ComboBoxWithAdd: StoryFn = (args) => {
+  const [items, setItems] = useState([...FAKE_ITEMS]);
   const [values, setValues] = useState<SelectOption<Item>[]>([]);
   const handleOnSelect = (newValues: SelectOptionRequired[]) => {
     actions('onSelect').onSelect(newValues);
@@ -233,15 +234,16 @@ export const ComboBoxWithAdd: StoryFn = (args) => {
       label: value,
       value: faker.string.uuid(),
     };
-
+    // NEW
+    setItems((prev) => [...prev, newItem]);
     setValues((prev) => [...prev, newItem]);
   };
 
   return (
     <ComboBox
       {...args}
       values={values as SelectOptionRequired[]}
-      items={FAKE_ITEMS}
+      items={items}
       onSelect={handleOnSelect}
       onAddItem={handleOnAdd}
     />

src/molecules/Select/ComboBox/ComboBox.test.tsx

@@ -1,3 +1,5 @@
+import { FormEvent } from 'react';
+
 import { faker } from '@faker-js/faker';
 
 import { ComboBox } from './ComboBox';
@@ -82,6 +84,38 @@ test('OnAddItem works as expected with {Enter} and preselected values', async ()
   expect(handleOnSelect).not.toHaveBeenCalled();
 });
 
+test('OnAddItem works as expected with {Enter} inside a form', async () => {
+  const handleOnAddItem = vi.fn();
+  const handleOnSelect = vi.fn();
+  const handleOnSubmit = vi.fn((e: FormEvent) => e.preventDefault());
+  const items = fakeSelectItems();
+  render(
+    <form onSubmit={handleOnSubmit}>
+      <ComboBox
+        values={[items[0]]}
+        onSelect={handleOnSelect}
+        onAddItem={handleOnAddItem}
+        items={items}
+      />
+    </form>
+  );
+  const user = userEvent.setup();
+
+  const input = screen.getByRole('combobox');
+
+  const someRandomText = faker.vehicle.vehicle();
+
+  await user.click(input);
+
+  await user.type(input, someRandomText);
+
+  await user.keyboard('{Enter}');
+
+  expect(handleOnAddItem).toHaveBeenCalledWith(someRandomText);
+  expect(handleOnSelect).not.toHaveBeenCalled();
+  expect(handleOnSubmit).not.toHaveBeenCalled();
+});
+
 test('OnAddItem works as expected when clicking item', async () => {
   const handleOnAddItem = vi.fn();
   const handleOnSelect = vi.fn();