Material UI Autocomplete component functions properly, but I am interested in extracting object.id as the value for the onSelect event (rather than object.name). Essentially, I want to display the object.name as the select item label, while retrieving object.id as the onSelect event value (event.target.value). Currently, my event.target.value is identical to the select item label (object.name). Here is an example snippet from the Material UI documentation:
The options object looks like this:
const options = [
{ id: "01", name: "Peter" },
{ id: "02", name: "Mary" },
{ id: "03", name: "John" }
]
The Autocomplete setup mirrors that of the Material UI documentation:
<Autocomplete
id="asynchronous-demo"
fullWidth
open={open}
onOpen={() => {
setOpen(true)
}}
onClose={() => {
setOpen(false)
}}
getOptionLabel={(option) => option.name}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
variant="outlined"
onChange={(event) => {
if (event.target.value !== '' || event.target.value !== null) {
onChangeHandle(event.target.value)
}
}}
onSelect={(event) => {
onSelectHandle(event)
}}
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
With the current setup, onSelect always returns object.name as event.target.value, however, I aim to send back object.id instead.
Is there a solution to achieve this?