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

Signed-off-by: Zeeshan Tamboli <[email protected]>
Co-authored-by: Aarón García Hervás <[email protected]>
Co-authored-by: Michał Dudak <[email protected]>

Author: 3 people

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.

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -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' },

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();