Version

Keyboard Navigation (igCombo)

Topic overview

This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through items or change the selected/highlighted items.

In this topic

This topic contains the following sections:

Keyboard interactions

Overview

Press To When
Alt + Down arrow Open drop down Drop down is closed
Alt + Up arrow Close drop down Drop down is opened
Ctrl + Home Move to very first item in drop down Drop down is opened
Ctrl + End Move to very last item Drop down is opened
Page Up Move to and selects the first visible item Drop down is opened and multiselection is enabled
Page Down Move to and selects the last visible item Drop down is opened and multiselection is enabled
Up arrow Move to and selects the prev item; Close drop down if opened Drop down is opened or closed
Down arrow Move to and selects next item; Open drop down if closed Drop down is opened or closed
Esc key Clear content when there isn’t selected item There is content in the input
Esc key Close the drop down The drop down is opened
Enter key Close the drop down There is selected item

Multiselection

Press To When
Page Up Move to first visible item Drop down is opened
Page Down Move to last visible item Drop down is opened
Up arrow Move to prev item; Close drop down if opened Drop down is opened or closed
Down arrow Move next item; Open drop down if closed Drop down is opened or closed
Enter key Select the active item There is active item

Shift interactions

When press Then
Shift The item is highlighted to active state
Shift If you don’t select more than one item nothing happens, the item stays in active state.
Shift + Up/Down arrows will change the active (highlighted) items and if you release Shift key the active items will be selected.
Shift + Enter Scenario: If you select item (with the mouse) and move the active item with up/down arrow key on Shift + Enter the items state, between the first and last selected items, will be changed to Selected.

Note: Shift key only select items

Ctrl interaction (addWithKeyModifier option set to true)

By default if MultiSelection is enabled the end user can select multiple items by simply clicking with left mouse button. In order to select multiple items with Ctrl addWithKeyModifier option must be set to true.

From browser

Press To
Left arrow Move cursor one char left
Right arrow Move cursor one char right
Ctr + Left Move cursor one word to the left
Ctr + Right Move cursor one word to the right
Shift Seletion of the text when moving cursor
Delete, Backspace Clear only the selected text
Delete, Backspace Clear char by char
Enter key Select item
Home key Move cursor to input text start
End key Move cursor to input text end
Backspace key Clear all the contents of the combo box (Hold the key; Ctrl+A)

View on GitHub