fix: duplicated IDs in panel (#1078)

algolia · Feb 16, 2023 · a732fc5 · a732fc5
1 parent c3824a9
commit a732fc5
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 25 deletions.
diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -239,19 +239,29 @@ export function getPropGetters<
     };
   };
 
-  const getLabelProps: GetLabelProps = (rest) => {
+  const getAutocompleteId = (instanceId: string, sourceId?: number) => {
+    return typeof sourceId !== 'undefined'
+      ? `${instanceId}-${sourceId}`
+      : instanceId;
+  };
+
+  const getLabelProps: GetLabelProps = (providedProps) => {
+    const { sourceIndex, ...rest } = providedProps || {};
+
     return {
-      htmlFor: `${props.id}-input`,
-      id: `${props.id}-label`,
+      htmlFor: `${getAutocompleteId(props.id, sourceIndex)}-input`,
+      id: `${getAutocompleteId(props.id, sourceIndex)}-label`,
       ...rest,
     };
   };
 
-  const getListProps: GetListProps = (rest) => {
+  const getListProps: GetListProps = (providedProps) => {
+    const { sourceIndex, ...rest } = providedProps || {};
+
     return {
       role: 'listbox',
-      'aria-labelledby': `${props.id}-label`,
-      id: `${props.id}-list`,
+      'aria-labelledby': `${getAutocompleteId(props.id, sourceIndex)}-label`,
+      id: `${getAutocompleteId(props.id, sourceIndex)}-list`,
       ...rest,
     };
   };
@@ -272,10 +282,12 @@ export function getPropGetters<
   };
 
   const getItemProps: GetItemProps<any, TMouseEvent> = (providedProps) => {
-    const { item, source, ...rest } = providedProps;
+    const { item, source, sourceIndex, ...rest } = providedProps;
 
     return {
-      id: `${props.id}-item-${item.__autocomplete_id}`,
+      id: `${getAutocompleteId(props.id, sourceIndex as number)}-item-${
+        item.__autocomplete_id
+      }`,
       role: 'option',
       'aria-selected': store.getState().activeItemId === item.__autocomplete_id,
       onMouseMove(event) {

diff --git a/packages/autocomplete-core/src/types/AutocompletePropGetters.ts b/packages/autocomplete-core/src/types/AutocompletePropGetters.ts
@@ -60,6 +60,7 @@ export type GetFormProps<TEvent = Event> = (props: {
 
 export type GetLabelProps = (props?: {
   [key: string]: unknown;
+  sourceIndex?: number;
 }) => {
   htmlFor: string;
   id: string;
@@ -101,6 +102,7 @@ export type GetPanelProps<TMouseEvent> = (props?: {
 
 export type GetListProps = (props?: {
   [key: string]: unknown;
+  sourceIndex?: number;
 }) => {
   role: string;
   'aria-labelledby': string;

diff --git a/packages/autocomplete-js/src/__tests__/detached.test.ts b/packages/autocomplete-js/src/__tests__/detached.test.ts
@@ -80,7 +80,7 @@ describe('detached', () => {
     });
 
     const firstItem = document.querySelector<HTMLLIElement>(
-      '#autocomplete-item-0'
+      '#autocomplete-0-item-0'
     );
 
     // Select the first item

diff --git a/packages/autocomplete-js/src/__tests__/renderer.test.ts b/packages/autocomplete-js/src/__tests__/renderer.test.ts
@@ -215,15 +215,15 @@ describe('renderer', () => {
                 data-autocomplete-source-id="testSource"
               >
                 <ul
-                  aria-labelledby="autocomplete-0-label"
+                  aria-labelledby="autocomplete-0-0-label"
                   class="aa-List"
-                  id="autocomplete-0-list"
+                  id="autocomplete-0-0-list"
                   role="listbox"
                 >
                   <li
                     aria-selected="false"
                     class="aa-Item"
-                    id="autocomplete-0-item-0"
+                    id="autocomplete-0-0-item-0"
                     role="option"
                   >
                     1

diff --git a/packages/autocomplete-js/src/__tests__/templates.test.tsx b/packages/autocomplete-js/src/__tests__/templates.test.tsx
@@ -92,15 +92,15 @@ describe('templates', () => {
       expect(within(panelContainer).getByRole('listbox'))
         .toMatchInlineSnapshot(`
         <ul
-          aria-labelledby="autocomplete-0-label"
+          aria-labelledby="autocomplete-0-0-label"
           class="aa-List"
-          id="autocomplete-0-list"
+          id="autocomplete-0-0-list"
           role="listbox"
         >
           <li
             aria-selected="false"
             class="aa-Item"
-            id="autocomplete-0-item-0"
+            id="autocomplete-0-0-item-0"
             role="option"
           >
             <div
@@ -208,15 +208,15 @@ describe('templates', () => {
       expect(within(panelContainer).getByRole('listbox'))
         .toMatchInlineSnapshot(`
         <ul
-          aria-labelledby="autocomplete-0-label"
+          aria-labelledby="autocomplete-0-0-label"
           class="aa-List"
-          id="autocomplete-0-list"
+          id="autocomplete-0-0-list"
           role="listbox"
         >
           <li
             aria-selected="false"
             class="aa-Item"
-            id="autocomplete-0-item-0"
+            id="autocomplete-0-0-item-0"
             role="option"
           >
             <div
@@ -343,15 +343,15 @@ describe('templates', () => {
                 </header>
               </div>
               <ul
-                aria-labelledby="autocomplete-0-label"
+                aria-labelledby="autocomplete-0-0-label"
                 class="aa-List"
-                id="autocomplete-0-list"
+                id="autocomplete-0-0-list"
                 role="listbox"
               >
                 <li
                   aria-selected="false"
                   class="aa-Item"
-                  id="autocomplete-0-item-0"
+                  id="autocomplete-0-0-item-0"
                   role="option"
                 >
                   <div
@@ -507,15 +507,15 @@ describe('templates', () => {
                 </header>
               </div>
               <ul
-                aria-labelledby="autocomplete-0-label"
+                aria-labelledby="autocomplete-0-0-label"
                 class="aa-List"
-                id="autocomplete-0-list"
+                id="autocomplete-0-0-list"
                 role="listbox"
               >
                 <li
                   aria-selected="false"
                   class="aa-Item"
-                  id="autocomplete-0-item-0"
+                  id="autocomplete-0-0-item-0"
                   role="option"
                 >
                   div

diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
@@ -131,14 +131,17 @@ export function renderPanel<TItem extends BaseItem>(
             className={classNames.list}
             {...propGetters.getListProps({
               state,
-              props: autocomplete.getListProps({}),
+              props: autocomplete.getListProps({
+                sourceIndex,
+              }),
               ...autocompleteScopeApi,
             })}
           >
             {items.map((item) => {
               const itemProps = autocomplete.getItemProps({
                 item,
                 source,
+                sourceIndex,
               });
 
               return (