Using remix-validated-form with multi select inputs (e.g., react-select)

[zayenz]

Multi-select components are sometimes very useful, but I haven't seen any example of how to best use remix-validated-form with such components?

For example, would it be reasonable to use react-select, or is there some other multi-select input library that would work better?

[airjp73]

There isn't really anything special you need to do for this. For a regular select element, you can use getInputProps form useField like you normally would.

<select {...getInputProps({ multiple: true })}>
  <option value="myOption1">My Option 1</option>
  <option value="myOption2">My Option 2</option>
</select>

react-select should also be fine. It takes a name prop so you don't even need a hidden input.

<ReactSelect
  {...getIpnutProps({
    multi: true,
    options: [
      { label: 'My Option 1', value: 'myOption1' },
      { label: 'My Option 2', value: 'myOption2' },
    ]
  })}
/>

If you have a controlled component that doesn't have an actual input, then you'll need to take the value and put it in one or more hidden inputs.

const [selected, setSelected] = useState([]);

// One way
return (
  <>
    {selected.map(item => <input key={item.value} name="mySelect" type="hidden" value={item.value} />)}
    <CustomSelect onChange={setSelected} value={selected} />
  </>
)

// Another way
return (
  <>
    {<input name="mySelect" type="hidden" value={JSON.stringify(selected) />}
    <CustomSelect onChange={setSelected} value={selected} />
  </>
)

[zayenz]

Thanks.

I've had some trouble with getting the typing for the additional props to getInputProps work well with react-select, but will continue testing. Good to know that it should work.