[Autocomplete] "A component is changing the controlled value state to be uncontrolled" error
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
If the list of Autocomplete
options is changed when some other than first value is highlighted, pressing Enter will result in the error in the title.
Material-UI: A component is changing the controlled value state of Autocomplete to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.
The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.
More info: https://fb.me/react-controlled-components
in Autocomplete (created by WithStyles(ForwardRef(Autocomplete)))
in WithStyles(ForwardRef(Autocomplete)) (at demo.js:44)
in BrokenAutocomplete (at index.js:6)
Expected Behavior 🤔
There should be no error - you should be able to select any option just fine.
Steps to Reproduce 🕹
- Go to https://codesandbox.io/s/material-demo-kw16l
- Put text cursor in the
Autocomplete
input field that should read “abcf” - Delete the character “f”. Now the pop-up should display all options
- Type “f” once again. Now the pop-up should display only the “abcf” option
- Hit Enter. The input should disappear completely and the console should have the above error
After some debugging, it seems that the root cause is that the selected item index is not recomputed on options
change.
Take a look at this dependency list of the relevant effect: https://github.com/mui-org/material-ui/blob/9bd4277ecd660ebe2fd4cb08960f58e98ddb6d43/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L457-L464
As you can see, it only cares about whether there are any options at all and not about the number of options.
Context 🔦
I’m trying to implement a simple autocomplete that loads its options via network.
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.11.0 / v5.0.0-alpha5 |
Material-UI lab | v4.0.0-alpha56 / v5.0.0-alpha5 |
React | v16.3.1 |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:13 (5 by maintainers)
Top GitHub Comments
@MincePie As a workaround I just toggle
filterSelectedOptions
back and forth to trigger the refresh of the currently selected index whenoptions
change.To be honest, not really - I’m trying to do my best at avoiding going outside of ClojureScript. Especially when it comes to unfamiliar and complicated components with long history.