Following up on #2890, I noticed that not all dropdown and dropdown-like components have the same interaction pattern. The components in question are:
- Application launcher
- Context selector
- Dropdown
- FormSelect
- Options menu
- Pagination
- Select
Here are some interactions i would generally expect to happen across these using the keyboard:
- Tab to focus on a toggle
- Enter key opens the menu
- The focus is placed on the first menu item
- I can use keyboard up/down to navigate between the items
- One of:
a) Enter key on an item closes the menu (if applicable and not multi-select)
b) Escape key is pressed to close the menu
- Focus is returned to the toggle
- Hitting the enter key again should reopen the menu since focus is back on the toggle
I think the key to have the same behavior across all of these components is to fix this behavior first in DropdownToggle / DropdownMenu components and then reuse these components in the other mentioned components. We have started to reuse some Dropdown components in other components, but there is still a lot of redundant code, especially surrounding the Toggle/Menu part of it.
Reactions are currently unavailable
Following up on #2890, I noticed that not all dropdown and dropdown-like components have the same interaction pattern. The components in question are:
Here are some interactions i would generally expect to happen across these using the keyboard:
a) Enter key on an item closes the menu (if applicable and not multi-select)
b) Escape key is pressed to close the menu
I think the key to have the same behavior across all of these components is to fix this behavior first in DropdownToggle / DropdownMenu components and then reuse these components in the other mentioned components. We have started to reuse some Dropdown components in other components, but there is still a lot of redundant code, especially surrounding the Toggle/Menu part of it.