[Autocomplete] Warn when value and option doesn't match

[guimex22]

Hi,
I am trying to change list options and default value from state. List option is ok but default value is never update.

I have add an exemple on this code box :
https://codesandbox.io/s/test-material-ui-autocomplete-700nh?fontsize=14&hidenavigation=1&theme=dark

Thank you for yours ideas...

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Control the component, we don't aim to support defaultValue prop updates (even if a native input do).

[guimex22]

Thank you for your reply. I am newbie andI think dificulty come from here... but when I add state variable on autocomplete value, items are show on textarea but not selected on dropdown list (and I can selected them second time).
Do you have a sample of controlled used of autocomplete ?

[oliviertassinari]

You can find one controlled demo in https://material-ui.com/components/autocomplete/#playground.

[guimex22]

I have see this but when I try to manage values directely, dropdownlist is not updated with selected values passed by state as you can see on my exemple :
https://codesandbox.io/s/test-material-ui-autocomplete-o3uic?fontsize=14&hidenavigation=1&theme=dark

Push button change list and add item preselected but in dropdown list this item is not selected and we can add it another time.

[oliviertassinari]

@guimex22 The value needs to be referentially equal to the option to consider it selected. We have #18443 to customize this.

However, I think that we have an opportunity to warn about this case. What do you think of this diff?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index f833a0c0c..5cd34fa78 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -247,6 +247,35 @@ export default function useAutocomplete(props) {

   popupOpen = freeSolo && filteredOptions.length === 0 ? false : popupOpen;

+  if (process.env.NODE_ENV !== 'production') {
+    if (value !== null && !freeSolo && options.length > 0) {
+      const missingValue = (multiple ? value : [value]).filter(
+        value2 => !options.some(option => getOptionSelected(option, value2)),
+      );
+
+      if (missingValue.length > 0) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        console.warn(
+          [
+            `Material-UI: you have provided an out-of-range value${
+              missingValue.length > 1 ? 's' : ''
+            } \`${
+              missingValue.length > 1
+                ? JSON.stringify(missingValue)
+                : JSON.stringify(missingValue[0])
+            }\` for the autocomplete ${id ? `(id="${id}") ` : ''}component.`,
+            '',
+            'Consider providing a value that matches one of the available options.',
+            'You can use the `getOptionSelected` prop to customize the equality test.',
+          ].join('\n'),
+        );
+      }
+    }
+  }
+
   const focusTag = useEventCallback(tagToFocus => {
     if (tagToFocus === -1) {
       inputRef.current.focus();

Do you want to work on a pull request? :)