[Autocomplete] Provide prop to disable option equal to value warning

docs/pages/base/api/use-autocomplete.json

@@ -50,6 +50,10 @@
       "type": { "name": "boolean", "description": "boolean" },
       "default": "false"
     },
+    "disableOptionEqualToValueWarning": {
+      "type": { "name": "boolean", "description": "boolean" },
+      "default": "false"
+    },
     "filterOptions": {
       "type": {
         "name": "(options: T[], state: FilterOptionsState<T&gt) =&gt T[]",

docs/pages/material-ui/api/autocomplete.json

@@ -35,6 +35,7 @@
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
     "disableListWrap": { "type": { "name": "bool" }, "default": "false" },
+    "disableOptionEqualToValueWarning": { "type": { "name": "bool" }, "default": "false" },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },
     "filterOptions": { "type": { "name": "func" } },
     "filterSelectedOptions": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -19,6 +19,7 @@
     "disabled": "If <code>true</code>, the component is disabled.",
     "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
     "disableListWrap": "If <code>true</code>, the list box in the popup will not wrap focus.",
+    "disableOptionEqualToValueWarning": "Disable warning when options are not equal to value",
     "disablePortal": "If <code>true</code>, the <code>Popper</code> content will be under the DOM hierarchy of the parent component.",
     "filterOptions": "A function that determines the filtered options to be rendered on search.<br><br><strong>Signature:</strong><br><code>function(options: Array&lt;T&gt;, state: object) =&gt; Array&lt;T&gt;</code><br><em>options:</em> The options to render.<br><em>state:</em> The state of the component.",
     "filterSelectedOptions": "If <code>true</code>, hide the selected options from the list box.",

docs/translations/api-docs/use-autocomplete/use-autocomplete.json

@@ -14,6 +14,7 @@
     "disabled": "If <code>true</code>, the component is disabled.",
     "disabledItemsFocusable": "If <code>true</code>, will allow focus on disabled items.",
     "disableListWrap": "If <code>true</code>, the list box in the popup will not wrap focus.",
+    "disableOptionEqualToValueWarning": "Disable warning when options are not equal to value",
     "filterOptions": "A function that determines the filtered options to be rendered on search.",
     "filterSelectedOptions": "If <code>true</code>, hide the selected options from the list box.",
     "freeSolo": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options.",

packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts

@@ -201,6 +201,11 @@ export interface UseAutocompleteProps<
    * @returns {boolean}
    */
   isOptionEqualToValue?: (option: T, value: T) => boolean;
+  /**
+   * Disable warning when options are not equal to value
+   * @default false
+   */
+  disableOptionEqualToValueWarning?: boolean;
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false

packages/mui-base/src/useAutocomplete/useAutocomplete.js

@@ -104,6 +104,7 @@ export default function useAutocomplete(props) {
     includeInputInList = false,
     inputValue: inputValueProp,
     isOptionEqualToValue = (option, value) => option === value,
+    disableOptionEqualToValueWarning = false,
     multiple = false,
     onChange,
     onClose,
@@ -253,7 +254,7 @@ export default function useAutocomplete(props) {
   const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
 
   if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
+    if (value !== null && !freeSolo && options.length > 0 && !disableOptionEqualToValueWarning) {
       const missingValue = (multiple ? value : [value]).filter(
         (value2) => !options.some((option) => isOptionEqualToValue(option, value2)),
       );

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -261,6 +261,7 @@ const excludeUseAutocompleteParams = <
   disableCloseOnSelect,
   disabledItemsFocusable,
   disableListWrap,
+  disableOptionEqualToValueWarning,
   filterSelectedOptions,
   handleHomeEndKeys,
   includeInputInList,

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

@@ -398,6 +398,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     disabled = false,
     disabledItemsFocusable = false,
     disableListWrap = false,
+    disableOptionEqualToValueWarning = false,
     disablePortal = false,
     filterOptions,
     filterSelectedOptions = false,
@@ -807,6 +808,11 @@ Autocomplete.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disableListWrap: PropTypes.bool,
+  /**
+   * Disable warning when options are not equal to value
+   * @default false
+   */
+  disableOptionEqualToValueWarning: PropTypes.bool,
   /**
    * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
    * @default false

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

@@ -1534,6 +1534,22 @@ describe('<Autocomplete />', () => {
       ]);
     });
 
+    it('skip warn if value does not exist in options list and disableOptionEqualToValueWarning is true', () => {
+      const value = 'value outside of options';
+      const options = ['val from previous server fetch'];
+
+      expect(() => {
+        render(
+          <Autocomplete
+            value={value}
+            options={options}
+            renderInput={(params) => <TextField {...params} />}
+            disableOptionEqualToValueWarning
+          />,
+        );
+      }).not.toWarnDev();
+    });
+
     it('warn if groups options are not sorted', () => {
       const data = [
         { group: 1, value: 'A' },