ComboBox - Keyboard Support
- 3 minutes to read
The DevExpress Blazor ComboBox supports keyboard navigation. Users can focus the editor’s input element, navigate within the drop-down item list, and select items. While DOM focus refers to the input element as the active element for keyboard interaction, visual focus can move to items in the drop-down list. Keyboard navigation is also supported in virtual scroll mode.
Note
Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.
Shortcut Keys for Input Element
The following shortcut keys are available when the editor’s input element is focused:
PC/Windows Shortcuts | Mac Shortcuts | Description |
|---|---|---|
Tab | Tab | Moves focus to the next focusable element on a page. Note that the drop-down button, custom buttons, and the Clear button are excluded from the page tab sequence. |
Shift + Tab | Shift + Tab | Moves focus to the previous focusable element on a page. |
Alt + Delete | Fn + Option + Delete | Clears the input element. |
Characters | Characters | Adds characters to the input if AllowUserInput is set to |
Backspace, Delete | Delete | Deletes characters in the input element if AllowUserInput is set to |
Home | Option + Arrow Up | Moves focus to the first character in the input element if AllowUserInput is set to |
End | Option + Arrow Down | Moves focus to the last item in the input element if AllowUserInput is set to |
Arrow Right | Arrow Right | Moves the cursor one character to the right in the input element if AllowUserInput is set to |
Arrow Left | Arrow Left | Moves the cursor one character to the left in the input element if AllowUserInput is set to |
Alt + Arrow Down | Option + Arrow Down | Opens the drop-down list, but keeps focus on the input element. |
Alt + Arrow Up | Option + Arrow Up | Closes the drop-down list, but keeps focus on the input element. |
Shortcut Keys for Drop-Down Item List
The following shortcut keys are available when the drop-down list is opened:
PC/Windows Shortcuts | Mac Shortcuts | Description |
|---|---|---|
Arrow Up | Arrow Up | Moves focus one item up. |
Arrow Down | Arrow Down | Moves focus one item down. |
Ctrl + Shift + Home | Ctrl + Shift + Fn + Arrow Up | Moves focus to the first item on the list. |
Ctrl + Shift + End | Ctrl + Shift + Fn + Arrow Down | Moves focus to the last item on the list. |
Page Up | Fn + Arrow Up | Moves focus to an item on the previous page. |
Page Down | Fn + Arrow Down | Moves focus to an item on the following page. |
Tab | Tab | Selects the focused item, updates the Value parameter value, closes the drop-down list, moves focus to the input element. |
Enter | Enter | Selects the focused item, updates Value and Text parameter values, and closes the drop-down list. |
Escape | Escape | Closes the drop-down list. |
The ComboBox does not currently allow you to navigate through elements in templated items.