Better keyboard support for QSelect
See original GitHub issueIs your feature request related to a problem? Please describe.
Implement more typical <select> keyboard behaviour for QSelect.
Describe the solution you’d like
-
If an item is highlighted in the options pop-up, <kbd>Tab</kbd> should input the highlighted item. This helps when quickly tabbing through form fields.
-
(if
use-inputis not enabled) <kbd>Space</kbd> should open the options pop-up. This is more consistent withselectthan <kbd>Enter</kbd>. Users may be more apprehensive about pressing <kbd>Enter</kbd>, as it is commonly used to submit forms. -
Keyboard jumping to options without
use-input- Type a letter to jump to first option starting with that letter
- Type additional letters to further jump to other options (e.g. <kbd>C</kbd>, <kbd>O</kbd> would jump to the first item starting with CO (with timeout to clear the buffer)
- Same letter multiple times jumps to next item starting with letter (e.g. <kbd>B</kbd>, <kbd>B</kbd>, <kbd>B</kbd> would jump to third item starting with B.
This is a pain point compared to a standard
<select>because you can’t quickly jump to an item with keyboard.use-inputcan help but don’t always want the overhead of implementing autocomplete filters or hiding items for simple selects. For this one, the type-jumping could possibly happen without even opening the pop-up like a standard<select>but it would also be ok if it did open because that’s consistent with arrow keys already opening the pop-up (which they do not do in standard<select>.
Describe alternatives you’ve considered
Capturing keyboard events with custom logic (it appears QSelect emits keyboard events, though this does not appear to be in the docs?).
Additional context
QSelect is generally awesome! But I do find myself getting tripped up by these.
Codepen to compare QSelect with <select>: https://codepen.io/gordonblahut/pen/zYOeVYa
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (2 by maintainers)

Top Related StackOverflow Question
Improved keyboard navigation for QSelect will be available in “quasar” v1.2.2
maybe it’s time to spawn other functionalities into their own component imo. atm qselect has quite a huge api, it’s doing so much. maybe QSelect, as the name suggest should just do what a native select does, while others into autocomplete etc…