fix(autocomplete): keep input focused when clicking inside panel + more specific React keys

packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteIndex.tsx

@@ -61,7 +61,7 @@ export function createAutocompleteIndexComponent({ createElement }: Renderer) {
             );
             return (
               <li
-                key={item.objectID}
+                key={`${itemProps.id}:${item.objectID}`}
                 {...itemProps}
                 className={cx(
                   'ais-AutocompleteIndexItem',

packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx

@@ -32,6 +32,11 @@ export function createAutocompletePanelComponent({ createElement }: Renderer) {
           classNames.root,
           props.className
         )}
+        onMouseDown={(event: React.MouseEvent<HTMLDivElement>) => {
+          // Prevents the autocomplete panel from blurring the input when
+          // clicking inside the panel.
+          event.preventDefault();
+        }}
       >
         <div className={cx('ais-AutocompletePanelLayout', classNames.layout)}>
           {children}

tests/common/widgets/autocomplete/options.tsx

@@ -999,5 +999,66 @@ export function createOptionsTests(
       expect(hiItem).not.toHaveClass('ais-ReverseHighlight-highlighted');
       expect(hiItem).not.toHaveClass('ais-ReverseHighlight-nonHighlighted');
     });
+
+    test('keeps input focused when clicking inside the panel', async () => {
+      const searchClient = createMockedSearchClient(
+        createMultiSearchResponse(
+          createSingleSearchResponse({
+            index: 'indexName',
+            hits: [{ objectID: '1', name: 'Item 1' }],
+          })
+        )
+      );
+
+      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);
+        await wait(0);
+      });
+
+      expect(input).toHaveFocus();
+
+      const panel = document.querySelector('.ais-AutocompletePanel')!;
+
+      await act(async () => {
+        userEvent.click(panel);
+        await wait(0);
+      });
+
+      expect(input).toHaveFocus();
+    });
   });
 }