[Autocomplete] Support values other than raw options

• I have searched the issues of this repository and believe that this is not a duplicate.

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.

[jakubrozbicki]

@oliviertassinari I can pretty much agree with all cases described here, I have similar issue, but with formik, however issue is still the same: options[0] type has to match value type, when I’d like to value to be type of options[0]['value']

• options are [{ value: "1", label: "lorem" }, { value: "2", label: "ipsum" }]
• value to be “1” or “2”

Which is pretty much identical to https://github.com/mui/material-ui/issues/23708#issuecomment-832819637

right I have to work around this by:

  const assigneesOptions = users?.map((user) => ({ value: user.id, label: user.email })) || [];
  
  return (
    <Autocomplete
        options={assigneesOptions.map((o) => o.value)}
        getOptionLabel={(option) => assigneesOptions.find(o => o.value === option)?.label ?? ""}
        ...
    />

using getOptionValue would be much easier in this case

  const assigneesOptions = users?.map((user) => ({ value: user.id, label: user.email })) || [];
  
  return (
    <Autocomplete
        options={assigneesOptions}
        getOptionValue={(option) => option.value}
        ...
    />

[cvburgess]

This is a huge issue for us when integrating autocomplete with a form library like formik or react-hook-form.

If you use a Select the primitive value is returned and all is good, but if you use an AutoComplete it shoves an object into your form and its not obvious how one is supposed to handle it.

Should I make a wrapper for AutoComplete that handles the values in and out until this is taclked? Is there some other obvious thing I am missing?

For us, label is a string and value is a UUID. When using the resulting form data we would expect the result to be a single UUID or an array of UUID (if the multiple prop is used) - not an object we need to parse… that’s not how Select works, and autocomplete in my mind is just a fancy select with typeahead support and some other nice features… but at its core, its a select.