[v6.5.0] Setting values for MultipleSelect doesn't work.

[mackankowski]

Hi Iulian,

I've noticed that the MultipleSelect component has stopped working correctly. Right now we're not able to set/change for its initial state. This part of the storybook shows the issue (no initial/default values are provided): https://iulian-radu-at.github.io/react-select-material-ui/?path=/story/reactselectmaterialui--with-value. The issue doesn't appear in 6.4.2.

Please investigate. Thanks for your involvement!

Best regards, Maciej

[iulianraduat]

Hi @mackankowski,

Thanks for reporting this. Because of the fixes in 6.5.0 for Issue #32, the code was fixed to reflect what the documentation says:

• Single select can use only defaultValue and value
• Multiple select can use only defaultValues and values (observe the extra "s" at the end of the words) Unfortunately, I forgot to make the change in the storybook so there were multiple selects using defaultValue and value instead of the correct defaultValues and values, hence the not working examples in storybook.

Now I updated the Readme and the storybook to better reflect these constraints.

About your problem, it looks like you are using defaultValue and/or value fields for a Multiple select. If so, please use defaultvalues and values instead and let me know if this was the solution to your problem. If it was not this the case, please let me also know so I can investigate more.

Thanks, Iulian

[mackankowski]

Hi @iulian-radu-at,

Thanks for your response and documentation updates!

Unfortunately, still I cannot investigate the source of the problem. The same codebase works differently with v.6.4.2 and 6.5.0+. I use controlled input (Controller) and load default values by reset function from react-hook-form. M Although (for v.6.4.2) I am able to load initial MultipleSelect values, isCreatable flag has some issue: new option appears when typing but cannot be added to the field.

I will provide more details if I discover any.

Best regards, Maciej

[iulianraduat]

Hi @mackankowski,

It will be great if you can produce a minimal example which can reproduce your problem.

Cheers, Iulian

[mackankowski]

Hi @iulian-radu-at,

Let's see the following example:

https://codesandbox.io/s/modern-hooks-b6reu?file=/src/components/MyForm.tsx

Please notice and compare differences between v.6.4.2 and any higher one.

[iulianraduat]

Hi @mackankowski,

Thanks for the example. It helped me to find the solution for you :)

As MultipleSelect ignores the "value" field because it is using "values", you need to indicate to Controller (from react-hook-form) to use values instead of value. To do this, you need to add the following to Controller:

valueName="values"

So your MultiSelect component will be defined like this:

const MultiSelect = (props: MultiSelectProps) => {
  return (
    <Controller
      as={MultipleSelect}
      control={props.control}
      name={props.name}
      options={props.options}
      label={props.label}
      size="small"
      margin="dense"
      SelectProps={{
        isCreatable: props.isCreatable,
        isClearable: props.isClearable,
        isSearchable: props.isSearchable,
      }}
      /* it is important for react-hook-form for setting the values */
      valueName="values"
    />
  );
};

Please check this solution and let me know if it worked.

Cheers, Iulian

[mackankowski]

Hello @iulian-radu-at,

The solution works great and I'm appreciated that.

Still, there is a little issue with the following example and I cannot create the new option - dropdown appears when typing, but a new value cannot be added.

Thanks for your time!

Maciej

---

I've opened the new issue regarding isCreatable props (https://github.com/iulian-radu-at/react-select-material-ui/issues/36).

The issue from this topic has been solved!