fix(autocomplete): clear panel query in instantsearch.js

Author: aymeric-giraudet

packages/instantsearch.js/src/widgets/autocomplete/autocomplete.tsx

@@ -190,7 +190,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
   indices,
   getSearchPageURL,
   onSelect: userOnSelect,
-  refine,
+  refine: refineAutocomplete,
   cssClasses,
   renderState,
   instantSearchInstance,
@@ -223,6 +223,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
       ) ?? false;
 
   const onRefine = (query: string) => {
+    refineAutocomplete(query);
     instantSearchInstance.setUiState((uiState) => ({
       ...uiState,
       [targetIndex!.getIndexId()]: {
@@ -388,9 +389,11 @@ function AutocompleteWrapper<TItem extends BaseHit>({
           ...getInputProps(),
           // @ts-ignore - This clashes with some ambient React JSX declarations.
           onInput: (evt: JSXPreact.TargetedEvent<HTMLInputElement>) =>
-            refine(evt.currentTarget.value),
+            refineAutocomplete(evt.currentTarget.value),
+        }}
+        onClear={() => {
+          onRefine('');
         }}
-        onClear={() => onRefine('')}
         isSearchStalled={instantSearchInstance.status === 'stalled'}
       />
       <AutocompletePanel {...getPanelProps()}>

tests/common/widgets/autocomplete/options.tsx

@@ -788,6 +788,81 @@ export function createOptionsTests(
       expect(input).toHaveFocus();
     });
 
+    test('clearing the query also clears internal autocomplete query', async () => {
+      const searchClient = createMockedSearchClient(
+        createMultiSearchResponse(
+          createSingleSearchResponse({
+            index: 'indexName',
+            hits: [
+              { objectID: '1', name: 'Item 1' },
+              { objectID: '2', name: 'Item 2' },
+            ],
+          })
+        )
+      );
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {
+          javascript: {
+            indices: [
+              {
+                indexName: 'indexName',
+                templates: {
+                  item: (props) => props.item.name,
+                },
+              },
+            ],
+          },
+          react: {
+            indices: [
+              {
+                indexName: 'indexName',
+                itemComponent: (props) => props.item.name,
+              },
+            ],
+          },
+          vue: {},
+        },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      const input = screen.getByRole('combobox', { name: /submit/i });
+
+      await act(async () => {
+        userEvent.click(input);
+        userEvent.type(input, 'Item 3');
+        userEvent.keyboard('{Enter}');
+        await wait(0);
+        userEvent.keyboard('{Enter}');
+        await wait(0);
+      });
+
+      expect(input).not.toHaveFocus();
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(screen.getByRole('button', { name: /clear/i })).toBeVisible();
+
+      await act(async () => {
+        userEvent.click(screen.getByRole('button', { name: /clear/i }));
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        {
+          indexName: 'indexName',
+          params: expect.objectContaining({
+            query: '',
+          }),
+        },
+      ]);
+    });
+
     test('refocuses the input after clearing the query', async () => {
       const searchClient = createMockedSearchClient(
         createMultiSearchResponse(