Select with object values (MUI)

[MonaMayrhofer]

Hello everyone!

I have skimmed through the online docs and at some points, it is implied that one can use objects as the values for options, like so:

      options: [
        {
          label: "A",
          value: {
            code: "a-code",
            blub: "bla",
          },
        },
        ...others
      ],

which seems to work fine for single selection, but as soon I enable isMulti things start to go very wrong.

First i suddenly have to supply

      initialValue: [],
      clearedValue: [],

or else MUIs useAutocomplete complains that Uncaught TypeError: (intermediate value).filter is not a function

then it seems to work fine, but MUI complains that no "option is equal to the value" which makes sense, as it has no way to know how to compare arbitrary options and some features do not work and the console is spammed with MUIs warnings, so I also add

      isOptionEqualToValue: (a, b) => {
        return a.value.code === b?.code;
      },

which gets passed through to MUI and fixes this issue. (This is also a problem with single selectors and in the docs btw here)

Then things start to work more like expected (as long as there is never more than 1 option selected), however as soon as I start to select more than one options this happens:

The first options looses its label and the b in isOptionEqualToValue gets undefined.

I debugged a bit and found out that the getSelectValue function gets passed the following stateValue:

[
 {code: "a-code", blub: "bla"},
{label: "B", {code: "b-code", blub: "bloob"},
]

which seems kind of messed up.

Before I dig deeper into the codebase I thought I'd check in here, if there is something i have missed or if this is even a known issue.

Thanks y'all

Edit:
Ok I did dig deeper and I suspect that handleSelectOption is the culprit, and kind of "unwraps" the selected options into their values, and so they slowly get "thinner and thinner"

[Hyperkid123]

@MonaMayrhofer helo and thanks for the feedback.

First i suddenly have to supply
initialValue: [],
clearedValue: [],

That is definitely a bug and should be added in as a fallback value for the multiple select variants.

Do you use the simpleValue attribute?

EDIT: And the fact that you loose the object value is a bug as well. Lets convert the conversation into an issue.