call onSearch if the value changes and the user is not searching (#118)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- If the value is updated for a combo-box and the listbox is visible and there is no user entered search, onSearch will be triggered
 - React 18.3 support
   - Remove default props in favour of default parameters
   - Fix warnings on spreading `key`

src/components/combo_box.jsx

@@ -278,6 +278,13 @@ export const ComboBox = memo(
       dispatch(onValueChanged());
     });
 
+    // If the value changes and the list box is active and no search is set trigger onSearch with the new label
+    useEffect(() => {
+      if (search === null && showListBox) {
+        onSearch?.(value?.label);
+      }
+    }, [value?.identity]); // eslint-disable-line react-hooks/exhaustive-deps
+
     // Do not show the list box is the only option is the currently selected option
     const showListBox = useMemo(
       () =>

src/components/combo_box.test.jsx

@@ -1579,6 +1579,47 @@ describe('value', () => {
       expectToHaveFocusedOption(screen.getByRole('option', { name: 'Banana' }));
     });
 
+    it('calls onSearch for an open list box with no search', async () => {
+      const onSearch = jest.fn();
+      const { rerender } = render(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+        />,
+      );
+      await userEvent.tab();
+      await userEvent.keyboard('{ArrowDown}');
+      rerender(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+          value="Banana"
+        />,
+      );
+      expect(onSearch).toHaveBeenCalledWith('Banana');
+    });
+
+    it('does not call onSearch for an open list box with a search', async () => {
+      const onSearch = jest.fn();
+      const { rerender } = render(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+        />,
+      );
+      await userEvent.tab();
+      await userEvent.type(screen.getByRole('combobox'), 'foo');
+      onSearch.mockClear();
+      rerender(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+          value="Banana"
+        />,
+      );
+      expect(onSearch).not.toHaveBeenCalled();
+    });
+
     it('changes the value of a closed listbox', async () => {
       const { rerender } = render(<ComboBoxWrapper options={options} />);
       await userEvent.tab();
@@ -1593,6 +1634,27 @@ describe('value', () => {
       await userEvent.keyboard('{ArrowDown}');
       expectToHaveFocusedOption(screen.getByRole('option', { name: 'Banana' }));
     });
+
+    it('does not call onSearch for an closed list box with no search', async () => {
+      const onSearch = jest.fn();
+      const { rerender } = render(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+        />,
+      );
+      await userEvent.tab();
+      await userEvent.keyboard('{ArrowDown}{Enter}');
+      onSearch.mockClear();
+      rerender(
+        <ComboBoxWrapper
+          options={options}
+          onSearch={onSearch}
+          value="Banana"
+        />,
+      );
+      expect(onSearch).not.toHaveBeenCalled();
+    });
   });
 });