[Select] Provide prop to allow custom option equality comparison

[brno32]

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

Summary 💡

I'm facing an issue where I'm getting the You have provided an out-of-range value warning in the Select component because my objects are failing the comparison check. This is because my initial value is not an object from the available options list, but an object I retrieved from the server with which I'm initializing my form. However all the properties are the same (namely id) so it should still recognize that this is the same object.

Examples 🌈

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/SelectInput.js#L14

I propose making areEqualValues the default value for an optional prop on the SelectInput component, which can be overridden by a custom validation function.

I'd like to do

<Select validateOption={(a, b) => a.id === b.id} />

Motivation 🔦

Even though my objects fail the equality check, they're still representing the same database entity, so I should be able to customize the validation myself.

[oliviertassinari]

This is similar to #17764. Based on the fact that we could get away from this issue without a lot of user request would suggest we don't need to do anything about it.

In the Autocomplete component, the prop getOptionSelected is meant to solve this problem. However, in #23708, we see that a getOptionValue is probably solving the same problem but covering more frequent use cases. This issue's context also explains how it's easy to solve with the Select

<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.

We also recommend providing a serializable string value to the Select component, not an object to be closer to a native form select behavior.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure enough people are looking for such capability. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

⚠️ Do not upvote this comment, but the main one

[Haaxor1689]

I feel like it's pretty common use-case to populate options of select input with response from one endpoint and then provide initial value that you got from other endpoint.

In case you are using multiple select input you won't get the warning mentioned above but you come across another issue which I guess is even worse. Since selected options are also checked with ref equality check there is no way to "unselect" the initial values.

[aaadipop]

I'm facing the same situation, when editing and the input is an object and, from here, "If the value is an object it must have reference equality with the option in order to be selected", if there is a separate array with options, the objects will not be eq. so it can be a feature :)

using object.id as value/key works good

[kokapelli]

What exactly is the blocker from just adding a getOptionSelected like prop to MenuItem? I'm currently facing this issue where I have an object with several values that I wish to represent in string format for each MenuItem. Where most cases are resolved easily by only requiring one string value for each MenuItem other users that require more than that are forced to create convoluted workarounds and intermediary arrays where array index checking is performed to ensure some form of referential equality.