Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select with object values (MUI)

See original GitHub issue

Discussed in https://github.com/data-driven-forms/react-forms/discussions/1275

^{Originally posted by MonaMayrhofer June 22, 2022} 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”</div>

cc MonaMayrhofer