[MultipleSelect] isCreatable props has stopped working

[mackankowski]

Hi @iulian-radu-at,

I put an extra topic for my little issue. isCreatable props don't seem to work for MultipleSelect: when typing, a new value is shown but cannot be added to the list. I'm sure that I was working before. The issue appears on different versions of the library.

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

Please help investigating.

Best regards, Maciej

[AnushreeDhar]

this still doesn't work for me i have to show two types of data on ui

1. first case i can create and add new from the drop down selection i save and see data is coming
2. i want to manipulate the selected data (edit it) and add new and its failing at that

[mackankowski]

Hi @iulian-radu-at, can you take a look at it, please? I'd like to use a combination of MultiSelect with TextField, but no chance right now. Thanks in advance!

[keemor]

Hi,

The problem is how to integrate react-select-material-ui with https://react-hook-form.com/

Here is an example https://codesandbox.io/s/react-hook-form-react-select-material-ui-integration-zubob?file=/src/index.js

Cheers,

[iulianraduat]

Hi @AnushreeDhar,

Maybe you can use the following code:

<SingleSelect
  ...
  SelectProps={{
    ...
    isCreatable: true,
    getNewOptionData: (inputValue) => ({
      label: inputValue,
      value: inputValue + " (changed)",
      isNew: true,
    }),
  }}
/>;

Please let me know if it worked for your use case.

Cheers, Iulian

[iulianraduat]

Hi @mackankowski and @keemor,

What are exactly your problems? I start feeling that these questions are more for you to answer than for me. As they are about using react-hook-form with react-select-material-ui.

@mackankowski I checked with older version and it never worked. Also, if I add onChange={()=>{}} to Controller in MultiSelect.tsx from your example, the new value remains displayed as long as I do not add a new value matching an already added one. Once I do this, the form/page is reloaded. It looks like a bug, maybe in react-hook-form, as I cannot reproduce it with react-select-material-ui only.

Please take into account that react-hook-form always provides a value for the props value/values of react-slect-material-ui and this value should match an option. But as long as isCreatable is true and onChange returns the new value (which is saved) but the options are not updated, I do not expect react-select-material-ui to work as you expect.

I appreciate all the problems you are reporting and I thank you for this, but as long as after investigating them I do not find them connected with a bug in react-select-material-ui I will not invest to much time for trying to provide you a solution.

Cheers, Iulian

[keemor]

Hi @iulian-radu-at and @mackankowski,

Thank you for investigating, I was aware that the problem lied in integration with RHF, but wasn't sure where to get help.

Actually I added onChange={value => value} to Controller and that solved the problem.

<Controller
      onChange={value => value} //added line
      as={MultipleSelect}
      control={props.control}
      name={props.name}
      options={props.options}
      label={props.label}
      size="small"
      margin="dense"
      valueName="values"
      SelectProps={{
        isCreatable: props.isCreatable,
        isClearable: props.isClearable,
        isSearchable: props.isSearchable
      }}
    />

Thank you for the support, your library creates a great and unified solution with material-ui and react-hook-form 😃

[mackankowski]

Thank you for your collaboration. All issues have been solved.