feat: multi-select hook for useSelect and useCombobox

[Daniel15]

Is it possible to use the useSelect hook for a list that allows selecting multiple options? Is there an example of this? It seems like it only has one selectedItem prop that just takes a single item, so it is fine to manage the "currently selected items" state myself?

[silviuaavram]

Hi! Currently yes, multiple selection is something a user should do by himself. Having a stateful value of selectedValues and controlling useSelect prop of selectedItem and always passing it as null is probably the way to go right now.

A hook to support this out of the box is currently being developed, but it does not guarantee that will cover your use case, as it depends how you will display the selected items. The hook will support the scenario with selected item pills, for instance in the To: field of Gmail / Outlook, when you select a few people and can move between them using Left/Right Arrows, use Delete to remove from selection.

I will use this issue to track this, thanks for pointing it out! Will write the specs in a second comment.

[silviuaavram]

Long story short, I would like to support this:

useMultiple should be easily usable along useSelect or useCombobox. The hooks should be linked by a common ref element that should represent either the <input> or the <button> in order for focus management to work. Specs below:

• getDropdownProps: should apply ArrowLeft handler that will move focus from dropdown to one of the items. Should be applied to either the button or the input, depending if dropdown is select or autocomplete.
• getItemProps: should be applied to each selected item pill. 1) Will add ArrowLeft and ArrowRight handlers to provide navigation between items and back to the dropdown. 2) Should also apply tabIndex of 0 to the currently focused selected item. 3) Should also apply Delete handler to remove the selected item from selection.
• getRemoveItemButton should be applied to the 'X' icons (if any) of the selected items. 1) Should apply onClick handler to remove the item from selection and move focus to another item / dropdown.

Also, an a11y message should be added each time an item has been removed from selection, either on Delete from item or on 'X' icon click.

[Daniel15]

but it does not guarantee that will cover your use case, as it depends how you will display the selected items

For my use case, currently I have a dropdown list where the selected values are displayed on the button:

but I'm thinking of changing that. The thing is that currently all are selected by default, and I just show "All" in that case:

Maybe the "Gmail compose"-style pills would be fine for this use case. I'll play around with the UI a bit when I get a chance.

[rnnyrk]

Is there an ETA on the useMultiple hook? Really love the new implementation and would love to try it out (is there an beta / rc?) / help in any way!

[mtt87]

I'm currently working on a multi select component and would love to try out and test it, I saw there is a PR open where a lot of work has already been done #895

@silviuaavram do you think it's safe to give it a try with the branch feat-use-multiple-selection or is there a published rc / alpha version?

Thanks 🙏

[silviuaavram]

It's already in 5.1.0-alpha.0 but I forgot to announce it here, my bad!

But I would like to make some API changes atm and will push them today. Will also release another alpha. Will let you know!

[silviuaavram]

Released 5.1.0-alpha.1 with the new changes!

[ncesar]

@silviuaavram where can I have access to 5.1.0-alpha.1?

[mtt87]

@ncesar https://www.npmjs.com/package/downshift/v/5.1.0-alpha.1

npm i downshift@5.1.0-alpha.1 should do it ;)

[silviuaavram]

I will update TS typings as well, right now these are broken for the new hook, since I did some renames.

…

On Wed, 1 Apr 2020 at 22:10, Mattia Asti ***@***.***> wrote: @ncesar <https://github.com/ncesar> https://www.npmjs.com/package/downshift/v/5.1.0-alpha.1 npm i ***@***.*** should do it ;) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#879 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACWAZAF26STWCBKWUPP6C2TRKOGT3ANCNFSM4KDRNMGQ> .