Make Selects built with useMultipleSelection work with traditional forms

[hollandThomas]

Hey,

I was wondering how to use useMultipleSelection to create a Multi-Select/Multi-Combobox that can be used to handle submit/change events of traditional forms (i.e. a way to create suitable name/value entries). I know that for a Single-Combobox, we can pass a name to getInputProps which works just fine.

<input  {...getInputProps({ name })} />

If we're doing the same for a multi-select, that of course does not work since there is more than just one value. We're currently rendering a hidden native <select> and set the options' selected attributes according to our current state, then dispatching a change event programmatically so that we can do something like

<form onChange={handleChange}>
  <OurMultiselect values={/*...*/} />
</form>

Doing so feels unnecessary and we're probably just missing something that's built-in to downshift.

In other words: We'd like our custom Multi-Select to behave just like its native counterpart without having to write custom code that enables this behavior. Is there an option we're missing or is this supposed to be solved in user-land?

const handleChange= (event) => {
  const formData = new FormData(event.currentTarget);
  console.log([...formData.entries()]);
};

<form onChange={handleChange}>
  <select multiple name="native-select">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</form>

Thank you

• downshift version: 7.0.4
• node version: 16.17.0
• npm version: 8.15.0

[silviuaavram]

useMultipleSelection is actually more of a useTagList. It's not going to help with your native multiple selection, the most accurate thing we have is also something we did a bit custom. https://www.downshift-js.com/use-select#basic-multiple-selection

Maybe we can support this by default via prop, will use this issue for tracking and updating on the progress.

[Tyresius92]

I've only tried this with the useCombobox version, but I think it should work with the useSelect version as well. Could you use a hidden input to solve this (in user-land, I'm not sure Downshift would want to be responsible for this)?

The implementation is relatively straightforward - just render a hidden input per selected item, alongside your regular input:

<div>
  <input
    {...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}
  />
  {/* This is where the magic happens */}
  {selectedItems.map(item => (
    <input key={item.value} type="hidden" value={item.value} name={props.name} />
  ))}
  {/* End of the magic */}
  <button
    aria-label="toggle menu"
    type="button"
    {...getToggleButtonProps()}
  >
    &#8595;
  </button>
</div>

I'm doing this in a Remix app, and it seems to work. Perhaps this could be solved by adding a minimal example to the examples repo?