Can not select MUI Autocomplete options while using renderOption
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
We can not Select option while using renderOption.
<Autocomplete
id="free-solo-demo"
freeSolo
options={suggestion}
// onSelectCapture={(e)=>{console.log(e)}}
getOptionLabel={(option: any) =>
`${option.name} ${option.companyName}`
}
selectOnFocus={true}
renderOption={(option: any) => {
console.log("option");
console.log(option);
return <li>{`${option.key}`}</li>;
}}
onChange={(event, value) => HandleUserProfile(value)}
renderInput={(params) => (
<TextField
{...params}
placeholder="Search..."
onChange={handleChange}
/>
)}
/>
Here is complete codesandbox link https://codesandbox.io/s/distracted-bassi-tqm7e?file=/src/App.tsx:2137-2857
Expected behavior 🤔
While using renderOption we should able to select option while giving custom style to options.
Steps to reproduce 🕹
codesandbox.io link https://codesandbox.io/s/distracted-bassi-tqm7e?file=/src/App.tsx:81-94
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Can not select MUI Autocomplete options while using ... - GitHub
I'm not a contributor, but I ran into something similar recently. The renderOption signature is (props, option) and this props argument contains ...
Read more >Using renderOption in MUI's AutoComplete - Stack Overflow
I am trying to make it so my autocomplete shows a label in the option, but the value is different. And so I...
Read more >Autocomplete API - Material UI - MUI
Name Type Default
options * array
renderInput * func
autoComplete bool false
Read more >A Guide on Material UI AutoComplete in React - Refine Dev
When using the MUI <Autocomplete component, you can choose to use checkboxes as search input option values. This helps you choose your options...
Read more >Customize MUI Autocomplete with getOptionLabel ...
Learn how to use getOptionLabel, renderInput, and renderOption in ... The Select component is not too different than the Autocomplete.
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’m not a contributor, but I ran into something similar recently. The
renderOption
signature is(props, option)
and thisprops
argument contains anonClick
handler that is responsible for recording the selection. So you’d need to change the code to`👋 Thanks for using MUI Core!
We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.
For support, please check out https://mui.com/getting-started/support/. Thanks!
If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.