Merge pull request 'fix(suggest): the dropdown reopened on top of the search results' (#131) from fix/suggest-reopens-over-results into main

Reviewed-on: #131

nextjs-app/__tests__/components/FilterBarSuggest.test.tsx

@@ -3,10 +3,11 @@ import userEvent from '@testing-library/user-event';
 import { FilterBar } from '@/components/FilterBar';
 
 const push = jest.fn();
+let searchParams = new URLSearchParams();
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
   usePathname: () => '/',
-  useSearchParams: () => new URLSearchParams(),
+  useSearchParams: () => searchParams,
 }));
 
 const FILTERS = {
@@ -24,6 +25,7 @@ beforeEach(() => {
       phase: 'Primary', school_type: 'Community school' }] }),
   })) as unknown as typeof fetch;
   push.mockClear();
+  searchParams = new URLSearchParams();
 });
 afterEach(() => { global.fetch = realFetch; });
 
@@ -74,3 +76,35 @@ describe('FilterBar autosuggest', () => {
       expect.stringContaining('search=brecknock')));
   });
 });
+
+describe('FilterBar autosuggest does not reopen over results', () => {
+  it('stays shut when the input arrives pre-filled from the URL', async () => {
+    /*
+     * The results-page bar renders with the search term already in the input.
+     * Opening on that would drop the dropdown on top of the results the search
+     * just produced — which is exactly what happened: the first result became
+     * unclickable, because the list sat over it and swallowed the pointer.
+     *
+     * Suggestions answer typing, not the presence of a value.
+     */
+    searchParams = new URLSearchParams('search=brecknock');
+    render(<FilterBar filters={FILTERS} autosuggest />);
+
+    expect(screen.getByRole('combobox')).toHaveValue('brecknock');
+    await new Promise((r) => setTimeout(r, 300));   // past the 200ms debounce
+    expect(global.fetch).not.toHaveBeenCalled();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('closes the dropdown when the search is submitted', async () => {
+    render(<FilterBar filters={FILTERS} autosuggest />);
+    const input = screen.getByRole('combobox');
+
+    await userEvent.type(input, 'brecknock');
+    expect(await screen.findByRole('listbox')).toBeInTheDocument();
+
+    await userEvent.type(input, '{Enter}');
+    await waitFor(() =>
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument());
+  });
+});