-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) #39096
[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) #39096
Conversation
Netlify deploy previewhttps://deploy-preview-39096--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
35f31d6
to
4d684e4
Compare
This is just a naive implementation, but useControllableReducer should have a warning like this similar to useControlled right? @michaldudak I noticed it could be a prerequisite for #38972 CC @DiegoAndai |
(controlledProps as Record<string, unknown>)[key] === undefined | ||
) { | ||
console.error( | ||
'MUI: useControllableReducer is changing a controlled prop to be uncontrolled', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we add the prop name here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah 👍 I will also pass in the component name too, as useControllableReducer
is likely to be unhelpful for the user that needs to see the error ~
Why is this? 🤔 |
The v5 Select uses (Though this is a just a feature for dev mode so it's not necessarily a huge blocker ~) |
e10408c
to
8e6949f
Compare
Getting some browser test errors after trying to pass variables to the error message 🧐 |
8e6949f
to
bb1e0b8
Compare
4babb7c
to
c4221ed
Compare
c4221ed
to
ab90257
Compare
Finally got it to work by leaving it for a while, then the mysterious failing test just stopped failing 😓 Open to suggestions for a more ergonomic way to pass the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Architecture looks good to me 🚀
The only thing I'm not 100% convinced is the componentName
name. What about debugLabel
or something like that which denotes that it's used for debugging.
Totally agree it's not the best name but there was kind of already a precedent 🙈 https://github.com/mui/material-ui/blob/master/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts#L98C2-L101 😅 @DiegoAndai |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mj12albert lets go with componentName
then 😅
Left a question
CC @michaldudak to have a look and see if I missed anything 🙏 |
I've added more commits to fix other tests that were failing |
I will merge this first as Michal is off for a while, and so I don't have to keep fixing tests 😅 |
…ncontrolled (and vice versa) (mui#39096)
…ncontrolled (and vice versa) (mui#39096)
…ncontrolled (and vice versa) (mui#39096)
From #36119 (comment), #38723 (comment), could be a prerequisite for #38972
Components (or hooks) that use
useControllableReducer
accept controlled props, which should remain controlled (or uncontrolled) for its lifetime, but currently does not throw an error when it happens like inuseControlled
This PR adds an equivalent warning by "watching" all the keys in
controlledProps