Feat/full custom select

[sean-brydon]

What does this PR do?

Code probably needs a bit of cleanup but thought i'd put it out here to see if anyone has any suggestions/improvements first

Full custom select component that matches 95% of WCAG a11y guidelines (I will work on improving in due course - react-select doesnt seem to even be 100%)

This is not used within the app anywhere as of right now. Just been implemented in isolation in storybook.

TODO (maybe in future PR)

• [ ] Where does the focus go after you've select an item when it isn't a multiselect? It doesn't go back to the select itself at least, resulting in that I can not hit space/enter again to reopen the select. I think that's the desired behaviour.

Fixes #6593

Loom Video: https://www.loom.com/share/436b048792514d4b8e6e8907e90bd5b5

Environment: Staging(main branch) / Production

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] Chore (refactoring code, technical debt, workflow improvements)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
cal	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 13, 2023 at 1:52PM (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 13, 2023 at 1:52PM (UTC)

[sean-brydon]

1. When navigating through the options list by keyboard, and selecting an item with space, it also types a space in the input field — that triggers a new search, thus narrowing the items further down. After selecting 2 items, you've typed 2 spaces, and don't see any item in the dropdown anymore. I think the typing of space shouldn't be added to the search when selecting an item.

Honestly not sure the right approach here - multi select none searchable should use space+enter to select items - however, with a search box its a bit of a gray area - and enter is seen as the most common way to select an item (You shouldnt ever hyjack an input from an input)

[sean-brydon]

• Does a checkbox make sense when it isn't a multi select?

Probably not actually - will double check figma

edit (Single should just be a check easy fix)

[sean-brydon]

4. Where does the focus go after you've select an item when it isn't a multiselect? It doesn't go back to the select itself at least, resulting in that I can not hit space/enter again to reopen the select. I think that's the desired behaviour.

Good spot - oh i love a11y :D

[JeroenReumkens]

1. When navigating through the options list by keyboard, and selecting an item with space, it also types a space in the input field — that triggers a new search, thus narrowing the items further down. After selecting 2 items, you've typed 2 spaces, and don't see any item in the dropdown anymore. I think the typing of space shouldn't be added to the search when selecting an item.

Honestly not sure the right approach here - multi select none searchable should use space+enter to select items - however, with a search box its a bit of a gray area - and enter is seen as the most common way to select an item (You shouldnt ever hyjack an input from an input)

I also checked other comboboxes, and space does type in the field instead of select there as well. So I think using enter is a hard requirement instead of space. So no need to fix I feel.

[JeroenReumkens]

Great new commits @sean-brydon, very happy with what I see. One thing we might be missing still but I think is good if we add straight away is dark mode. Could you check with @Jaibles about this?

[PeerRich]

Great new commits @sean-brydon, very happy with what I see. One thing we might be missing still but I think is good if we add straight away is dark mode. Could you check with @Jaibles about this?

~~not sure, i think the public booking page will continue to use react-select-timezone right?~~

nevermind. routing forms have selects and darkmdoe

[sean-brydon]

Great new commits @sean-brydon, very happy with what I see. One thing we might be missing still but I think is good if we add straight away is dark mode. Could you check with @Jaibles about this?

~not sure, i think the public booking page will continue to use react-select-timezone right?~

nevermind. routing forms have selects and darkmdoe

Will pick this up tomorrow should be a quick win to implement :)

[sean-brydon]

@PeerRich @JeroenReumkens Darkmode been commited :)

[JeroenReumkens]

Great work @sean-brydon! Just tested again and noticed two other small issues;

1. I think the disabled states for section titles got lost when implementing dark mode? I also see that the section title has a checkbox even though you can not check that (or should it work as a "select all below"?)
2. When selecting options in a multi select, I see the dropdown itself also grows in size. Somehow it feels a bit annoying. What do you think? 🤔

[PeerRich]

lemme put this on auto merge, @sean-brydon can you ping @JeroenReumkens once you addressed the changes and @JeroenReumkens can you approve after?

[sean-brydon]

@JeroenReumkens I have fixed the disabled state

I can't replicate

When selecting options in a multi select, I see the dropdown itself also grows in size. Somehow it feels a bit annoying. What do you think? 🤔

At all - you got a demo of that happening?