New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make Selects built with useMultipleSelection
work with traditional forms
#1450
Comments
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. |
I've only tried this with the 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()}
>
↓
</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? |
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 aname
togetInputProps
which works just fine.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 achange
event programmatically so that we can do something likeDoing 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?
Thank you
downshift
version: 7.0.4node
version: 16.17.0npm
version: 8.15.0The text was updated successfully, but these errors were encountered: