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

[Autocomplete] An error occurs when changing multiple #21136

Closed
1 task done
weizhi9958 opened this issue May 21, 2020 · 7 comments · Fixed by #21194
Closed
1 task done

[Autocomplete] An error occurs when changing multiple #21136

weizhi9958 opened this issue May 21, 2020 · 7 comments · Fixed by #21194
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@weizhi9958
Copy link

weizhi9958 commented May 21, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

An error occurs when changing multiple
A component is changing the default value state of an uncontrolled Autocomplete after being initialized. To suppress this warning opt to use a controlled Autocomplete.

Expected Behavior

No error

Steps to Reproduce

https://codesandbox.io/s/solitary-http-e0zzh?file=/App.js

@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! support: Stack Overflow Please ask the community on Stack Overflow labels May 21, 2020
@support

This comment has been minimized.

@support support bot closed this as completed May 21, 2020
@oliviertassinari

This comment has been minimized.

@weizhi9958
Copy link
Author

What can i do?
Would you give me more information?

@oliviertassinari oliviertassinari removed the support: Stack Overflow Please ask the community on Stack Overflow label May 22, 2020
@support support bot reopened this May 22, 2020
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. labels May 22, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented May 22, 2020

@weizhi9958 You are right, the warning shouldn't be thrown in this context. Thanks for the report. What do you think of this patch?

diff --git a/packages/material-ui/src/utils/useControlled.js b/packages/material-ui/src/utils/useControlled.js
index dab0f9039..730ccb30a 100644
--- a/packages/material-ui/src/utils/useControlled.js
+++ b/packages/material-ui/src/utils/useControlled.js
@@ -27,7 +27,7 @@ export default function useControlled({ controlled, default: defaultProp, name,
     const { current: defaultValue } = React.useRef(defaultProp);

     React.useEffect(() => {
-      if (defaultValue !== defaultProp) {
+      if (!isControlled && defaultValue !== defaultProp) {
         console.error(
           [
             `Material-UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +
@@ -35,7 +35,7 @@ export default function useControlled({ controlled, default: defaultProp, name,
           ].join('\n'),
         );
       }
    }, [JSON.stringify(defaultProp)]);
   }

   const setValueIfUncontrolled = React.useCallback((newValue) => {

Do you want to submit a pull request? :)

@marcosvega91
Copy link
Contributor

marcosvega91 commented May 22, 2020

maybe could be better to check JSON.stringify of both attribute.
if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) {

@oliviertassinari
Copy link
Member

@marcosvega91 I don't know. I believe we use JSON.stringify here to support people that provide rich default objects. What would this change help to achieve?

@marcosvega91
Copy link
Contributor

Thinking better you are right. Never mind 😃

weizhi9958 pushed a commit to weizhi9958/material-ui that referenced this issue May 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants