From 2892711d4ed027ca6779ad39b6600c741ca1f102 Mon Sep 17 00:00:00 2001 From: Aidan <46799759+PossiblyAShrub@users.noreply.github.com> Date: Wed, 1 Oct 2025 10:42:38 -0600 Subject: [PATCH 1/2] [autocomplete] Add note about unique key extraction for duplicate labels Solution referenced in https://github.com/mui/material-ui/issues/46917, but remains undocumented. Signed-off-by: Aidan <46799759+PossiblyAShrub@users.noreply.github.com> --- .../components/autocomplete/autocomplete.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 66ea7f2bf92a38..4b83cdb6adee4b 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -53,6 +53,19 @@ However, you can use different structures by providing a `getOptionLabel` prop. 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. +:::warning +If your options have duplicate labels, you must extract a unique key with the `getOptionKey` prop. + +```tsx +const options = [ + { label: 'The Godfather', id: 1 }, + { label: 'The Godfather', id: 2 }, +]; + +return option.id} />; +``` +::: + ### Playground Each of the following examples demonstrates one feature of the Autocomplete component. From d729da3b285120655eb48061f93a3cf84af8b930 Mon Sep 17 00:00:00 2001 From: Aidan Olsen Date: Wed, 1 Oct 2025 11:08:00 -0600 Subject: [PATCH 2/2] Run prettier --- docs/data/material/components/autocomplete/autocomplete.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 4b83cdb6adee4b..1722e4eb7cef41 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -64,6 +64,7 @@ const options = [ return option.id} />; ``` + ::: ### Playground