Summary 💡
Right now (at least if you use multiple) Autocomplete/useAutocomplete the value that comes back in onChange is always the raw option data. i.e. If you use options=[{value: 'a', label: 'A'}, {value: 'b', label: 'B'}] and select the "A" option then value will be [{value: 'a', label: 'A'}].
Ideally it would be possible to provide multiple=true options=[{value: 'a', label: 'A'}, {value: 'b', label: 'B'}] and get back values like ['a']. Autocomplete does feel like this is intended to be supported, because you can provide a getOptionSelected and it's used to identify selected options instead of doing any comparisons on the option itself. However when it comes to adding an item to a multiple array, all useAutocomplete does is newValue.push(option);. There is no way to control what part of option is actually used as the value.
I think a getOptionValue(option) function would fit the current options implementation the most.
Examples 🌈
<Autocomplete
multiple
getOptionSelected={(option, value) => option.value === value}
getOptionValue={(option) => option.value}
options={[{value: 'US', label: 'United States', {value: 'CA', label: 'Canada'}]}
/>Motivation 🔦
MUI's <Select> easily supports this. It uses children instead, so all it takes is options.map(item => <MenuItem key={item.value} value={item.value}>{item.value}</MenuItem>) to do this in Select and pretty much every project I've worked on uses Select this way. It would be strongly preferred if it were easy to use useAutocomplete the same way.
Summary 💡
Right now (at least if you use
multiple) Autocomplete/useAutocomplete thevaluethat comes back inonChangeis always the raw option data. i.e. If you useoptions=[{value: 'a', label: 'A'}, {value: 'b', label: 'B'}]and select the "A" option then value will be[{value: 'a', label: 'A'}].Ideally it would be possible to provide
multiple=true options=[{value: 'a', label: 'A'}, {value: 'b', label: 'B'}]and get back values like['a']. Autocomplete does feel like this is intended to be supported, because you can provide agetOptionSelectedand it's used to identify selected options instead of doing any comparisons on the option itself. However when it comes to adding an item to amultiplearray, all useAutocomplete does isnewValue.push(option);. There is no way to control what part of option is actually used as the value.I think a
getOptionValue(option)function would fit the current options implementation the most.Examples 🌈
Motivation 🔦
MUI's
<Select>easily supports this. It uses children instead, so all it takes isoptions.map(item => <MenuItem key={item.value} value={item.value}>{item.value}</MenuItem>)to do this in Select and pretty much every project I've worked on uses Select this way. It would be strongly preferred if it were easy to use useAutocomplete the same way.