[Autocomplete] Warn wrong comparison getOptionSelected implementation

[tagaychinova]

Bug Demo: https://codesandbox.io/s/material-demo-q3fno

[oliviertassinari]

It's a duplicate of #18499.

[oliviertassinari]

@tagaychinova Interesting case, I propose the following new error message:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index dfd6171c8..47e2a4c59 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -439,6 +439,24 @@ export default function useAutocomplete(props) {
       const item = newValue;
       newValue = Array.isArray(value) ? [...value] : [];

+      if (process.env.NODE_ENV !== 'production') {
+        let matches = 0;
+        for (let i = 0; i < newValue.length; i += 1) {
+          if (getOptionSelected(item, newValue[i])) {
+            matches += 1;
+          }
+        }
+
+        if (matches > 1) {
+          console.error(
+            [
+              'Material-UI: the `getOptionSelected` method of useAutocomplete do not handle the arguments correctly.',
+              `The component expects a single value to match a given option but found ${matches}.`,
+            ].join('\n'),
+          );
+        }
+      }
+
       const itemIndex = findIndex(newValue, valueItem => getOptionSelected(item, valueItem));

       if (itemIndex === -1) {

[ahmad-reza619]

@oliviertassinari why not we try to solve this issue instead of giving error message?

[oliviertassinari]

@ahmad-reza619 This error message is a lead/tip on how to solve the problem in your codebase. If you can't figure it out with it, then this warning might not be good enough. I wonder what lead to this wrong usage of the API and how we could better help 🤔.

[oliviertassinari]

Maybe we should rename getOptionSelected to optionEqualValue or something similar 🤔.

[ahmad-reza619]

Maybe we should rename getOptionSelected to optionEqualValue or something similar 🤔.

sounds good, and btw why not replace the for with Array.prototype.some for edgy fp style 😎

[ahmad-reza619]

something like this

const matches = newValue.some(val => optionEqualValue(item, val));

if (matches) {
   console.error(
        [
            'Material-UI: the `getOptionSelected` method of useAutocomplete do not handle the arguments correctly.',
            `The component expects a single value to match a given option but found ${matches}.`,
        ].join('\n')
   )
}