Desktop/keyboard navigation for components?

  • While testing out Quasar, I noticed that some components, take the Select component for instance, do not have any built-in keyboard navigation support. For example: the Select component does not open the options list on ‘enter’. The option list cannot be navigated by arrows, nor selected by ‘enter’. Is this intentional? I can build the events myself, but wanted to check if this was done for a reason. And, if not, if this something that could be added to the roadmap? (if it hasn’t already… I looked and didn’t see it, but may have missed it) Thanks!

  • up


  • I was thinking about developing an app extension implementing keyboard navigation, but I dont know when I’ll have time for it

  • Admin

    Hi, What are you talking about? 🙂 Almost all components are keyboard accessible, including QSelect. Are you sure on the right page?

  • The QTable really needs keyboard support, like navigating with the arrow keys, select / unselect rows with space and an option to show selected rows as “pressed” instead of checkboxes.


  • @rstoenescu Specifically on the select it would be nice to be able to type a letter and have you “jump” to that letter in the select. Kinda like a traditional html select tag.

  • @labs20 How do you do this today? With a spacial navigation custom class?

  • @azeredobr I’m not doing this with quasar yet. I have it done on another project and I was hopping that quasar would bring this by default, so I wouldn’t need to re implement it by myself again.

    I think the best way to this would be two complete separated but, of course related implementations:

    • A new boolean prop, like “selected_checkbox”, true by default that keeps the current checkbox for selecting rows, but when false, the visual state of selected of a row would be an css effect of a “pressed” row and no checkbox would appear;
    • Keyboard support for space, up and down arrows being select/unselect, row up and row down respectively. Naturally, a table now would receive focus (and have a @focus listener) via tab navigation or click, witch would initiate the keyboard support.


Log in to reply