Autocomplete controlled state, when initial value is undefined, the next time state changes component doesn't show the value

[JohnMusleh]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/hqv9tn
2. Click on the button "test" which sets the value to an option
3. You will see that the value changed but the component still displays no value

Note that if you change the initial value to be null , this bug will not happen, it only happens when the initial value = undefined

Current behavior

Component does not display value

Expected behavior

Component should display value

Context

No response

Your environment

npx @mui/envinfo

  Google Chrome 130.0.6723.117
  System:
    OS: macOS 15.1
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 18.1
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/base: 5.0.0-alpha.103 => 5.0.0-alpha.103 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/icons-material:  5.16.7 
    @mui/material:  5.4.4 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @mui/x-data-grid:  6.10.2 
    @mui/x-data-grid-premium:  6.10.2 
    @mui/x-data-grid-pro:  6.10.2 
    @mui/x-internals:  7.21.0 
    @mui/x-license:  7.21.0 
    @mui/x-license-pro:  6.10.2 
    @types/react: 17.0.39 => 17.0.39 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: 5.3.3 => 5.3.3 
    typescript: 4.5.5 => 4.5.5

Search keywords: Autocomplete controlled state value bug

[mnajdova]

This is expected, the component turns into controlled mode if value is provided, but undefined is treated as the value is not provided, so the component is in uncontrolled mode. null is different, because setting a prop to null means that the user of the component set this value to something. I hope this explanation helps.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@JohnMusleh How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[JohnMusleh]

hi @mnajdova , thanks for the explanation!

now that I understand this, I have a question

isn't it possible to switch the component from uncontrolled mode to controlled?

[mnajdova]

This is not supported, there could be issues with these changes, internal state depending on other internal state/prop. As a rule of thumb, use value: null if you want to have a controlled mode, don't specify this prop if you want an uncontrolled behavior.