mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.04k stars 32.31k forks source link

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

Closed JohnMusleh closed 1 week ago

JohnMusleh commented 1 week ago

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 commented 1 week ago

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[bot] commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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.