Skip to content

Commit a732fc5

Browse files
FabienMotteFabienMotte
authored
fix: duplicated IDs in panel (#1078)
1 parent c3824a9 commit a732fc5

File tree

6 files changed

+42
-25
lines changed

6 files changed

+42
-25
lines changed

‎packages/autocomplete-core/src/getPropGetters.ts

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -239,19 +239,29 @@ export function getPropGetters<
239239
};
240240
};
241241

242-
const getLabelProps: GetLabelProps = (rest) => {
242+
const getAutocompleteId = (instanceId: string, sourceId?: number) => {
243+
return typeof sourceId !== 'undefined'
244+
? `${instanceId}-${sourceId}`
245+
: instanceId;
246+
};
247+
248+
const getLabelProps: GetLabelProps = (providedProps) => {
249+
const { sourceIndex, ...rest } = providedProps || {};
250+
243251
return {
244-
htmlFor: `${props.id}-input`,
245-
id: `${props.id}-label`,
252+
htmlFor: `${getAutocompleteId(props.id, sourceIndex)}-input`,
253+
id: `${getAutocompleteId(props.id, sourceIndex)}-label`,
246254
...rest,
247255
};
248256
};
249257

250-
const getListProps: GetListProps = (rest) => {
258+
const getListProps: GetListProps = (providedProps) => {
259+
const { sourceIndex, ...rest } = providedProps || {};
260+
251261
return {
252262
role: 'listbox',
253-
'aria-labelledby': `${props.id}-label`,
254-
id: `${props.id}-list`,
263+
'aria-labelledby': `${getAutocompleteId(props.id, sourceIndex)}-label`,
264+
id: `${getAutocompleteId(props.id, sourceIndex)}-list`,
255265
...rest,
256266
};
257267
};
@@ -272,10 +282,12 @@ export function getPropGetters<
272282
};
273283

274284
const getItemProps: GetItemProps<any, TMouseEvent> = (providedProps) => {
275-
const { item, source, ...rest } = providedProps;
285+
const { item, source, sourceIndex, ...rest } = providedProps;
276286

277287
return {
278-
id: `${props.id}-item-${item.__autocomplete_id}`,
288+
id: `${getAutocompleteId(props.id, sourceIndex as number)}-item-${
289+
item.__autocomplete_id
290+
}`,
279291
role: 'option',
280292
'aria-selected': store.getState().activeItemId === item.__autocomplete_id,
281293
onMouseMove(event) {

‎packages/autocomplete-core/src/types/AutocompletePropGetters.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export type GetFormProps<TEvent = Event> = (props: {
6060

6161
export type GetLabelProps = (props?: {
6262
[key: string]: unknown;
63+
sourceIndex?: number;
6364
}) => {
6465
htmlFor: string;
6566
id: string;
@@ -101,6 +102,7 @@ export type GetPanelProps<TMouseEvent> = (props?: {
101102

102103
export type GetListProps = (props?: {
103104
[key: string]: unknown;
105+
sourceIndex?: number;
104106
}) => {
105107
role: string;
106108
'aria-labelledby': string;

‎packages/autocomplete-js/src/__tests__/detached.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ describe('detached', () => {
8080
});
8181

8282
const firstItem = document.querySelector<HTMLLIElement>(
83-
'#autocomplete-item-0'
83+
'#autocomplete-0-item-0'
8484
);
8585

8686
// Select the first item

‎packages/autocomplete-js/src/__tests__/renderer.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -215,15 +215,15 @@ describe('renderer', () => {
215215
data-autocomplete-source-id="testSource"
216216
>
217217
<ul
218-
aria-labelledby="autocomplete-0-label"
218+
aria-labelledby="autocomplete-0-0-label"
219219
class="aa-List"
220-
id="autocomplete-0-list"
220+
id="autocomplete-0-0-list"
221221
role="listbox"
222222
>
223223
<li
224224
aria-selected="false"
225225
class="aa-Item"
226-
id="autocomplete-0-item-0"
226+
id="autocomplete-0-0-item-0"
227227
role="option"
228228
>
229229
1

‎packages/autocomplete-js/src/__tests__/templates.test.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,15 @@ describe('templates', () => {
9292
expect(within(panelContainer).getByRole('listbox'))
9393
.toMatchInlineSnapshot(`
9494
<ul
95-
aria-labelledby="autocomplete-0-label"
95+
aria-labelledby="autocomplete-0-0-label"
9696
class="aa-List"
97-
id="autocomplete-0-list"
97+
id="autocomplete-0-0-list"
9898
role="listbox"
9999
>
100100
<li
101101
aria-selected="false"
102102
class="aa-Item"
103-
id="autocomplete-0-item-0"
103+
id="autocomplete-0-0-item-0"
104104
role="option"
105105
>
106106
<div
@@ -208,15 +208,15 @@ describe('templates', () => {
208208
expect(within(panelContainer).getByRole('listbox'))
209209
.toMatchInlineSnapshot(`
210210
<ul
211-
aria-labelledby="autocomplete-0-label"
211+
aria-labelledby="autocomplete-0-0-label"
212212
class="aa-List"
213-
id="autocomplete-0-list"
213+
id="autocomplete-0-0-list"
214214
role="listbox"
215215
>
216216
<li
217217
aria-selected="false"
218218
class="aa-Item"
219-
id="autocomplete-0-item-0"
219+
id="autocomplete-0-0-item-0"
220220
role="option"
221221
>
222222
<div
@@ -343,15 +343,15 @@ describe('templates', () => {
343343
</header>
344344
</div>
345345
<ul
346-
aria-labelledby="autocomplete-0-label"
346+
aria-labelledby="autocomplete-0-0-label"
347347
class="aa-List"
348-
id="autocomplete-0-list"
348+
id="autocomplete-0-0-list"
349349
role="listbox"
350350
>
351351
<li
352352
aria-selected="false"
353353
class="aa-Item"
354-
id="autocomplete-0-item-0"
354+
id="autocomplete-0-0-item-0"
355355
role="option"
356356
>
357357
<div
@@ -507,15 +507,15 @@ describe('templates', () => {
507507
</header>
508508
</div>
509509
<ul
510-
aria-labelledby="autocomplete-0-label"
510+
aria-labelledby="autocomplete-0-0-label"
511511
class="aa-List"
512-
id="autocomplete-0-list"
512+
id="autocomplete-0-0-list"
513513
role="listbox"
514514
>
515515
<li
516516
aria-selected="false"
517517
class="aa-Item"
518-
id="autocomplete-0-item-0"
518+
id="autocomplete-0-0-item-0"
519519
role="option"
520520
>
521521
div

‎packages/autocomplete-js/src/render.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,14 +131,17 @@ export function renderPanel<TItem extends BaseItem>(
131131
className={classNames.list}
132132
{...propGetters.getListProps({
133133
state,
134-
props: autocomplete.getListProps({}),
134+
props: autocomplete.getListProps({
135+
sourceIndex,
136+
}),
135137
...autocompleteScopeApi,
136138
})}
137139
>
138140
{items.map((item) => {
139141
const itemProps = autocomplete.getItemProps({
140142
item,
141143
source,
144+
sourceIndex,
142145
});
143146

144147
return (

0 commit comments

Comments
 (0)