Usage Example - Multiple select combo box with shift click/enter for group selection

[daniel-a-marshall]

I wanted to suggest adding this usage example to the doc site. It covers how to add functionality for the user to do group selection using the shiftKey modifier on the item enter and click events. I hope it's a good example of how to use customized event handlers. Also, it shows another integration of the useMultipleSelection hook. Here is the code pen link https://codesandbox.io/s/cold-dawn-vv5w5j

As a side note or question, I wonder if it would make sense to expose the shift modifier key in the reducer for these events or send the event to the reducer as a whole. This would allow the handling of this kind of interaction in the reducer or possibly the onStateChange function. I notice the alt key is being tracked for some of the arrow key presses maybe the shift could be added for the enter and click events. Just a thought I know it's only one use case but it would streamline this implementation and may be useful for others. I could submit a PR for that if you think it would be reasonable.

[silviuaavram]

Hi @daniel-a-marshall, I think it's a great example to add both to the docsite and to the examples repo.

I will review if you want to create PRs to merge this example in the repos.

Some things to consider in the example:

• what happens when you select a selection that is partially selected, right now it does not fully work (select 3 then 1 then 5 with shift, shouldn't it select all from 1 to 5 or at least 3 to 5? right now it's doing a strange selection)
• the select all and clear button are not accessible via keyboard, unfortunately. they may need to always be visible, or to keep the menu open when focus is on select all or clear buttons.
• removing items or navigating through items does not work, maybe it's related to onStateChange in useMultipleSelection

Otherwise, I love your example! I hope to have it in our repo examples and docsite, so feel free to add it. Let me know how can I help!