diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 8fe8e978b255fb..f3783b8dfa7b84 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -50,6 +50,8 @@ const options = ['The Godfather', 'Pulp Fiction']; 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. + ### Playground Each of the following examples demonstrates one feature of the Autocomplete component. diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 4cea6195fb534c..53236e3887a708 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -1719,31 +1719,6 @@ describe('', () => { ); }); - it('warn if value does not exist in options list', () => { - const value = 'not a good value'; - const options = ['first option', 'second option']; - - const errorMessage = 'None of the options match with `"not a good value"`'; - - let expectedOccurrences = 4; - - if (reactMajor === 18) { - expectedOccurrences = 6; - } else if (reactMajor === 17) { - expectedOccurrences = 2; - } - - expect(() => { - render( - } - />, - ); - }).toWarnDev(Array(expectedOccurrences).fill(errorMessage)); - }); - it('warn if groups options are not sorted', () => { const data = [ { group: 1, value: 'A' }, diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 0fcd419096c29d..264a6e2218acdf 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -243,28 +243,6 @@ function useAutocomplete(props) { const listboxAvailable = open && filteredOptions.length > 0 && !readOnly; - if (process.env.NODE_ENV !== 'production') { - if (value !== null && !freeSolo && options.length > 0) { - const missingValue = (multiple ? value : [value]).filter( - (value2) => !options.some((option) => isOptionEqualToValue(option, value2)), - ); - - if (missingValue.length > 0) { - console.warn( - [ - `MUI: The value provided to ${componentName} is invalid.`, - `None of the options match with \`${ - missingValue.length > 1 - ? JSON.stringify(missingValue) - : JSON.stringify(missingValue[0]) - }\`.`, - 'You can use the `isOptionEqualToValue` prop to customize the equality test.', - ].join('\n'), - ); - } - } - } - const focusTag = useEventCallback((tagToFocus) => { if (tagToFocus === -1) { inputRef.current.focus();