[Autocomplete]Selected value is not rendering
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 😯
I have checked the documentation for the Autoselect thoroughly but for some reason, in my project, the selected value is not rendering at all. I have tried the exact replication of the codesandbox provided demo but it still not working. In codesandbox it is working perfectly fine.
<Grid item xs={12} md={6}>
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
)}
/>
</Grid>
Steps to Reproduce 🕹
I guess this is because of the other packages in my repository. Here is my package.json
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@material-ui/core": "^4.5.2",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.37",
"@material-ui/pickers": "^3.2.8",
"date-fns": "^2.0.0-beta.5",
"firebase": "^7.5.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^5.1.1",
"react-redux-firebase": "^2.2.4",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-slick": "^0.25.2",
"redux": "^4.0.4",
"redux-firestore": "^0.11.0",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"typeface-roboto": "0.0.75"
},
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | ^4.5.2" |
React | ^16.9.0" |
Browser | Chrome Version 79.0.3945.88 (Official Build) (64-bit) |
OS | Ubuntu 18.04 LTS |
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Material UI Autocomplete component not showing values from ...
I tried with the debugger and found its getting value in this.state.tidelocation_searchtext but failed to set it with params. Thanks in advance ...
Read more >[Autocomplete]Selected value is not rendering #18990 - GitHub
I have checked the documentation for the Autoselect thoroughly but for some reason, in my project, the selected value is not rendering at...
Read more >A Guide on Material UI AutoComplete in React - Refine Dev
The renderInput prop allows you to customise the rendered input to display the option values in whatever form you please.
Read more >Autocomplete | Primer React
Used to render a text input that allows a user to quickly filter through a list of options to pick one or more...
Read more >Demystifying Errors in MUI Autocomplete — part — I - Medium
Options props take only arrays. Almost all Autocomplete errors I got is because of the inconsistency of data structures which we will see...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I was also struggling with this issue today. Turns out that it was the old material UI core version that caused it. I just installed the labs dependency today and that was the latest version.
Upgrading to @material-ui/core@^4.8.1 solved this. After upgrading the selected option renders in the textfield just fine.
I think that the issues already serve as documentation for edge cases 👍.