feat(autocomplete): deduplicate recent searches/suggestions (#6824)

* feat(autocomplete): deduplicate recent searches/suggestions

* bundlesize

* tests

* revert hidden and replace with aria-hidden

Author: aymeric-giraudet

bundlesize.config.json

@@ -10,19 +10,19 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "90.75 kB"
+      "maxSize": "91 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "193.25 kB"
+      "maxSize": "193.5 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
       "maxSize": "53.75 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "72.25 kB"
+      "maxSize": "72.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",

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

@@ -27,6 +27,7 @@ export function createAutocompletePanelComponent({ createElement }: Renderer) {
     return (
       <div
         {...props}
+        aria-hidden={hidden}
         className={cx(
           'ais-AutocompletePanel',
           !hidden && 'ais-AutocompletePanel--open',

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

@@ -24,6 +24,7 @@ import { component } from '../../lib/suit';
 import { prepareTemplateProps } from '../../lib/templating';
 import {
   createDocumentationMessageGenerator,
+  find,
   getContainerNode,
   walkIndex,
 } from '../../lib/utils';
@@ -366,12 +367,23 @@ function AutocompleteWrapper<TItem extends BaseHit>({
     const elementId =
       indexName === showSuggestions?.indexName ? 'suggestions' : indexName;
 
+    const filteredHits =
+      elementId === 'suggestions' && showRecent
+        ? hits.filter(
+            (suggestionHit) =>
+              !find(
+                storageHits,
+                (storageHit) => storageHit.query === suggestionHit.query
+              )
+          )
+        : hits;
+
     elements[elementId] = (
       <AutocompleteIndex
         key={indexId}
         HeaderComponent={headerComponent}
         ItemComponent={itemComponent}
-        items={hits.map((item) => ({
+        items={filteredHits.map((item) => ({
           ...item,
           __indexName: indexId,
         }))}

packages/react-instantsearch/src/widgets/Autocomplete.tsx

@@ -313,21 +313,31 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
         }}
         items={storageHits}
         getItemProps={getItemProps}
+        key="recentSearches"
       />
     );
   }
 
   indices.forEach(({ indexId, indexName, hits }, i) => {
     const elementId =
       indexName === showSuggestions?.indexName ? 'suggestions' : indexName;
+    const filteredHits =
+      elementId === 'suggestions' && showRecent
+        ? hits.filter(
+            (suggestionHit) =>
+              !storageHits.find(
+                (storageHit) => storageHit.query === suggestionHit.query
+              )
+          )
+        : hits;
     elements[elementId] = (
       <AutocompleteIndex
         key={indexId}
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
         HeaderComponent={indicesConfig[i].headerComponent}
         // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
         ItemComponent={indicesConfig[i].itemComponent}
-        items={hits.map((item) => ({
+        items={filteredHits.map((item) => ({
           ...item,
           __indexName: indexId,
         }))}

packages/react-instantsearch/src/widgets/__tests__/Autocomplete.test.tsx

@@ -166,6 +166,7 @@ describe('Autocomplete', () => {
     expect(container.querySelector('.ais-AutocompletePanel'))
       .toMatchInlineSnapshot(`
       <div
+        aria-hidden="true"
         aria-labelledby="autocomplete:r0:input"
         class="ais-AutocompletePanel"
         id="autocomplete:r0:panel"
@@ -247,6 +248,7 @@ describe('Autocomplete', () => {
     expect(container.querySelector('.ais-AutocompletePanel'))
       .toMatchInlineSnapshot(`
       <div
+        aria-hidden="true"
         aria-labelledby="autocomplete:r1:input"
         class="ais-AutocompletePanel"
         id="autocomplete:r1:panel"

tests/common/widgets/autocomplete/options.tsx

@@ -228,7 +228,7 @@ export function createOptionsTests(
 
       // click the hello combo box suggestion
       await act(async () => {
-        screen.getAllByText('hello')[0].click();
+        screen.getByText('hello').click();
         await wait(0);
       });
 
@@ -238,6 +238,9 @@ export function createOptionsTests(
       expect(recentSearches).toHaveLength(1);
       expect(recentSearches[0]).toHaveTextContent('hello');
 
+      // It should not be duplicated in suggestions
+      expect(screen.getAllByText('hello').length).toBe(1);
+
       await act(async () => {
         screen
           .getByRole('button', {

tests/common/widgets/autocomplete/templates.tsx

@@ -208,6 +208,7 @@ export function createTemplatesTests(
         normalizeSnapshot('P484'),
         `
         <div
+          aria-hidden="false"
           aria-labelledby="autocompleteP484input"
           class="ais-AutocompletePanel ais-AutocompletePanel--open"
           id="autocompleteP484panel"
@@ -291,14 +292,6 @@ export function createTemplatesTests(
                       class="ais-AutocompleteIndexItem ais-AutocompleteSuggestionsItem"
                       id="autocompleteP484item:indexName2:0"
                       role="row"
-                    >
-                      hello
-                    </li>
-                    <li
-                      aria-selected="false"
-                      class="ais-AutocompleteIndexItem ais-AutocompleteSuggestionsItem"
-                      id="autocompleteP484item:indexName2:1"
-                      role="row"
                     >
                       world
                     </li>