@@ -16,7 +16,12 @@ import {
16
16
GetRootProps ,
17
17
InternalAutocompleteOptions ,
18
18
} from './types' ;
19
- import { getActiveItem , isOrContainsNode , isSamsung } from './utils' ;
19
+ import {
20
+ getActiveItem ,
21
+ getAutocompleteElementId ,
22
+ isOrContainsNode ,
23
+ isSamsung ,
24
+ } from './utils' ;
20
25
21
26
interface GetPropGettersOptions < TItem extends BaseItem >
22
27
extends AutocompleteScopeApi < TItem > {
@@ -104,8 +109,15 @@ export function getPropGetters<
104
109
role : 'combobox' ,
105
110
'aria-expanded' : store . getState ( ) . isOpen ,
106
111
'aria-haspopup' : 'listbox' ,
107
- 'aria-owns' : store . getState ( ) . isOpen ? `${ props . id } -list` : undefined ,
108
- 'aria-labelledby' : `${ props . id } -label` ,
112
+ 'aria-owns' : store . getState ( ) . isOpen
113
+ ? store
114
+ . getState ( )
115
+ . collections . map ( ( { source } ) =>
116
+ getAutocompleteElementId ( props . id , 'list' , source )
117
+ )
118
+ . join ( ' ' )
119
+ : undefined ,
120
+ 'aria-labelledby' : getAutocompleteElementId ( props . id , 'label' ) ,
109
121
...rest ,
110
122
} ;
111
123
} ;
@@ -180,12 +192,23 @@ export function getPropGetters<
180
192
'aria-autocomplete' : 'both' ,
181
193
'aria-activedescendant' :
182
194
store . getState ( ) . isOpen && store . getState ( ) . activeItemId !== null
183
- ? `${ props . id } -item-${ store . getState ( ) . activeItemId } `
195
+ ? getAutocompleteElementId (
196
+ props . id ,
197
+ `item-${ store . getState ( ) . activeItemId } ` ,
198
+ activeItem ?. source
199
+ )
184
200
: undefined ,
185
- 'aria-controls' : store . getState ( ) . isOpen ? `${ props . id } -list` : undefined ,
186
- 'aria-labelledby' : `${ props . id } -label` ,
201
+ 'aria-controls' : store . getState ( ) . isOpen
202
+ ? store
203
+ . getState ( )
204
+ . collections . map ( ( { source } ) =>
205
+ getAutocompleteElementId ( props . id , 'list' , source )
206
+ )
207
+ . join ( ' ' )
208
+ : undefined ,
209
+ 'aria-labelledby' : getAutocompleteElementId ( props . id , 'label' ) ,
187
210
value : store . getState ( ) . completion || store . getState ( ) . query ,
188
- id : ` ${ props . id } - input` ,
211
+ id : getAutocompleteElementId ( props . id , ' input' ) ,
189
212
autoComplete : 'off' ,
190
213
autoCorrect : 'off' ,
191
214
autoCapitalize : 'off' ,
@@ -241,29 +264,21 @@ export function getPropGetters<
241
264
} ;
242
265
} ;
243
266
244
- const getAutocompleteId = ( instanceId : string , sourceId ?: number ) => {
245
- return typeof sourceId !== 'undefined'
246
- ? `${ instanceId } -${ sourceId } `
247
- : instanceId ;
248
- } ;
249
-
250
- const getLabelProps : GetLabelProps = ( providedProps ) => {
251
- const { sourceIndex, ...rest } = providedProps || { } ;
252
-
267
+ const getLabelProps : GetLabelProps = ( rest ) => {
253
268
return {
254
- htmlFor : ` ${ getAutocompleteId ( props . id , sourceIndex ) } - input` ,
255
- id : ` ${ getAutocompleteId ( props . id , sourceIndex ) } - label` ,
269
+ htmlFor : getAutocompleteElementId ( props . id , ' input' ) ,
270
+ id : getAutocompleteElementId ( props . id , ' label' ) ,
256
271
...rest ,
257
272
} ;
258
273
} ;
259
274
260
275
const getListProps : GetListProps = ( providedProps ) => {
261
- const { sourceIndex , ...rest } = providedProps || { } ;
276
+ const { source , ...rest } = providedProps || { } ;
262
277
263
278
return {
264
279
role : 'listbox' ,
265
- 'aria-labelledby' : ` ${ getAutocompleteId ( props . id , sourceIndex ) } - label` ,
266
- id : ` ${ getAutocompleteId ( props . id , sourceIndex ) } - list` ,
280
+ 'aria-labelledby' : getAutocompleteElementId ( props . id , ' label' ) ,
281
+ id : getAutocompleteElementId ( props . id , ' list' , source ) ,
267
282
...rest ,
268
283
} ;
269
284
} ;
@@ -284,12 +299,14 @@ export function getPropGetters<
284
299
} ;
285
300
286
301
const getItemProps : GetItemProps < any , TMouseEvent > = ( providedProps ) => {
287
- const { item, source, sourceIndex , ...rest } = providedProps ;
302
+ const { item, source, ...rest } = providedProps ;
288
303
289
304
return {
290
- id : `${ getAutocompleteId ( props . id , sourceIndex as number ) } -item-${
291
- item . __autocomplete_id
292
- } `,
305
+ id : getAutocompleteElementId (
306
+ props . id ,
307
+ `item-${ item . __autocomplete_id } ` ,
308
+ source
309
+ ) ,
293
310
role : 'option' ,
294
311
'aria-selected' : store . getState ( ) . activeItemId === item . __autocomplete_id ,
295
312
onMouseMove ( event ) {
0 commit comments