Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Autocomplete] Remove autocomplete warning regarding value not equal to option #43314

Merged
merged 8 commits into from
Aug 16, 2024
2 changes: 2 additions & 0 deletions docs/data/material/components/autocomplete/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 an array of 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.
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved

### Playground

Each of the following examples demonstrates one feature of the Autocomplete component.
Expand Down
25 changes: 0 additions & 25 deletions packages/mui-material/src/Autocomplete/Autocomplete.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1719,31 +1719,6 @@ describe('<Autocomplete />', () => {
);
});

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(
<Autocomplete
value={value}
options={options}
renderInput={(params) => <TextField {...params} />}
/>,
);
}).toWarnDev(Array(expectedOccurrences).fill(errorMessage));
});

it('warn if groups options are not sorted', () => {
const data = [
{ group: 1, value: 'A' },
Expand Down
22 changes: 0 additions & 22 deletions packages/mui-material/src/useAutocomplete/useAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down