Blazor MultiSelect Dropdown Example - Keyboard Navigation
MultiSelect functionalities can be interactive with keyboard shortcuts. In the following sample, various key combinations can be used to interact with MultiSelect.
The MultiSelect supports the following keyboard shortcuts to initiate various actions.
- Focus
- Alt + J - Focuses on the first component of the sample.
- Input Navigation
- Alt + Down arrow - Opens the popup list.
- Alt + Up arrow - Closes the popup list.
- Tab - Focuses on the next Tab Index element on the page when the popup is closed. Otherwise, closes the popup list and the focus remains on the component.
- Shift + Tab - Focuses on the previous Tab Index element on the page when the popup is closed. Otherwise, closes the popup list and the focus remains on the component.
- Selection
- Enter - Selects the focused item, and the popup list closes when it is in the open state.
- Popup Navigation
- Down arrow - Set focus at the first item in the MultiSelect when no item is selected. Otherwise, moves focus next to the currently selected item.
- Up arrow - Moves focus previous to the currently selected one.
- Page down - Scrolls down to the next page and set focus to the first item when the popup list opens.
- Page up - Scrolls up to the previous page and sets focus to the first item when the popup list opens.
- Home - Set focus to the first item.
- End - Set focus to the last item.
- Esc - Closes the popup list when it is in an open state and the currently selected item remains the same.