Skip to content

Commit ccde1f3

Browse files
[docs][autocomplete] Add note about unique key extraction for duplicate labels (#47010)
Signed-off-by: Aidan <[email protected]> Co-authored-by: Zeeshan Tamboli <[email protected]>
1 parent d4070a2 commit ccde1f3

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

docs/data/material/components/autocomplete/autocomplete.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,20 @@ However, you can use different structures by providing a `getOptionLabel` prop.
5353

5454
If your options are objects, you must provide the `isOptionEqualToValue` prop to ensure correct selection and highlighting. By default, it uses strict equality to compare options with the current value.
5555

56+
:::warning
57+
If your options have duplicate labels, you must extract a unique key with the `getOptionKey` prop.
58+
59+
```tsx
60+
const options = [
61+
{ label: 'The Godfather', id: 1 },
62+
{ label: 'The Godfather', id: 2 },
63+
];
64+
65+
return <Autocomplete options={options} getOptionKey={(option) => option.id} />;
66+
```
67+
68+
:::
69+
5670
### Playground
5771

5872
Each of the following examples demonstrates one feature of the Autocomplete component.

0 commit comments

Comments
 (0)