[Autocomplete] Streamline Mapping Value to Options

[aress31]

Summary

Currently, when using non-flattened options (e.g., an array of objects), if the value is set to a property such as the id, we must explicitly locate the corresponding option to set it as the selected value. This approach introduces boilerplate code and can lead to errors when interacting with the component. It negatively impacts the developer experience (DX).

It would be great to introduce a valueFromOption or a similar feature to streamline this process, removing the need for the additional code shown below. This enhancement would make the component more generic and adaptable to both flattened and non-flattened options.

Examples

 const selectedValue = flatOptions
  ? value
  : options.find((option) => option.id === value) ?? null;

  return (
    <Autocomplete
      // --- SNIP ---
      options={processedOptions}
      // --- SNIP ---
      value={selectedValue}
    />

Motivation

See above.

Search keywords: autocomplete, options, value

[aarongarciah]

Hey @aress31, thanks for contributing. I'm closing this issue since #23708 already exists. Feel free to provide more context if you think is needed.

[aress31]

@aarongarciah the ticket you have linked is not related to my request. I would want to see a isValueEqualToOption.

[aarongarciah]

You mentioned in the issue description the possibility of introducing a valueFromOption prop and the issue I linked talks about a getOptionValue prop, so I think they're related. If I'm not mistaken, both issues try to solve the problem of having the possibility of using "raw" values.

[aress31]

@aarongarciah seems like a fix to #31192 would solve my issue. Using the options in getOptionLabel that is currently selected via the isOptionSelected check rather than the value would allow decoupling the value to process/send to backend to the text to display.

[aarongarciah]

@aress31 yes, #31192 and #23708 are very related.

[aress31]

@aarongarciah do you have an eta for the fix? It seems that the linked tickets have been ignored for a while.

[aarongarciah]

No ETA, sorry. Base UI will be working on a new Combobox in 2025 and the intention is that Material UI then rewrites the Autocomplete on top of it. But we're far from that so I can't give any specifics. Not sure if we'll change the Autocomplete implementation before the rewrite to be honest.