Desktop/keyboard navigation for components?

[jvukovich]

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!

[azeredobr]

up

anybody?

[lucasfernog]

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

[rstoenescu]

Hi, What are you talking about? Almost all components are keyboard accessible, including QSelect. Are you sure on the right page? https://v1.quasar-framework.org/vue-components/select

[labs20]

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.

Thanks

[daveline]

@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. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

[azeredobr]

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

[labs20]

@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.

Thanks