question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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 🕹

  1. Go to https://codesandbox.io/s/material-demo-kw16l
  2. Put text cursor in the Autocomplete input field that should read “abcf”
  3. Delete the character “f”. Now the pop-up should display all options
  4. Type “f” once again. Now the pop-up should display only the “abcf” option
  5. 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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
p-himikcommented, Aug 13, 2020

@MincePie As a workaround I just toggle filterSelectedOptions back and forth to trigger the refresh of the currently selected index when options change.

1reaction
p-himikcommented, Aug 5, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

A component is changing an uncontrolled Autocomplete to be ...
I use Autocomplete component with value props, which is controlled by state. By removing value={this.state.imageId} prop form the Autocomplete ...
Read more >
[Autocomplete] "A component is changing the controlled value ...
The issue is present in the latest release. I have searched the issues of this repository and believe that this is not a...
Read more >
A component is changing an uncontrolled input to be controlled
The warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to...
Read more >
A component is changing an uncontrolled input to be controlled
The warning "A component is changing an uncontrolled input to be controlled" occurs when an input value is initialized to undefined but is...
Read more >
A component is changing an uncontrolled Autocomplete to be ...
These two state are isolated, they should be controlled independently. Component becomes uncontrolled when inputValue property is undefined, and vice versa.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found