[Autocomplete] A component is changing the default value state of an uncontrolled Autocomplete after being initialized with uncontrolled component

[jmaldon1]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using a basic Autocomplete setup like the following:

<Autocomplete
  defaultValue={initValue}
  options={options}
  freeSolo
  renderInput={(renderParams) => (
    <TextField
      {...renderParams}
    />
  )}
/>

Whenever the initValue changes, the value in the autocomplete does not update (which is correct behavior). But it does provide a warning in the console saying that I should be using a controlled component:

MUI: 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 🤔

In my situation, I do not want a controlled component, the reason the initValue is changing is because the user can update the field, submit the form, I will send that to the backend, the page will re-render and initValue will contain the updated value. defaultValue should ignore this change and not throw a warning at me, much like how a TextField works.

A workaround is to do something like this:

const [initValueState, initValueState] = useState(initValue);

return (<Autocomplete
  defaultValue={initValueState}
  options={options}
  freeSolo
  renderInput={(renderParams) => (
    <TextField
      {...renderParams}
    />
  )}
/>)

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.104
    @mui/core-downloads-tracker:  5.10.12
    @mui/icons-material: ^5.10.9 => 5.10.9
    @mui/material: ^5.10.12 => 5.10.12
    @mui/private-theming:  5.11.7
    @mui/styled-engine:  5.11.8
    @mui/system: ^5.11.8 => 5.11.8
    @mui/types:  7.2.3
    @mui/utils:  5.11.7
    @types/react: ^18.0.27 => 18.0.27
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.7.3 => 4.7.3

[sai6855]

@jmaldon1 use value prop instead of defaultValue, defaultValue by definition has to be constant through out render cycle but in your case you are changing it

[hbjORbj]

I think @sai6855 resolved your issue. I am closing the issue.

[jmaldon1]

@sai6855 There are some issues with this approach though.

Changing to value means that i need to then use an onChange func with state to allow the user to update the value right? Making it a controlled component. A controlled component is just not needed in my instance, I want to set the initial value and leave all subsequent updates uncontrolled.

And why doesn’t a regular TextField show the same warning when the defaultValue changes?

also looking at Reacts docs I am reading this:

Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in the DOM.

It doesnt mention that I must never update the defaultValue, just that it gets ignored.

[jmaldon1]

@hbjORbj could we not close just yet? I have some follow ups

[michaldudak]

The warning is there to make you aware that even if you change the value, it'll be ignored. What's exactly the use case here? Why do you change the defaultValue?

[jmaldon1]

@michaldudak
So i am using a SSR framework (Remix js).

The page loads, I get the value in the database, and pass that value down to the AutoComplete component as the defaultValue. Then the user makes changes to the field freely (defaultValue is not changing), submits the form, the database updates, the page rerenders, SSR will repeat the process above by getting the value in the database and passing it back down to the AutoComplete component. So now the Autocomplete has a new defaultValue.

I do this process with TextFields regularly and it works fine with no warnings. I don't think a warning is really necessary here.