I did end up implementing the functionality myself (fingers crossed quasar will implement it out-of-the-box for its components in the near future), although it wasn’t as complicated as what I linked to seems since I used a ref on each item like so:
<q-item
tabindex="-1"
role="option"
v-for="(opt, index) in options"
:key="opt"
:ref="opt"
clickable
v-close-popup
@click="onItemClick(opt)"
@keydown.up.prevent="focusOn(index - 1)"
@keydown.down.prevent="focusOn(index + 1)"
>
then in the script:
focusOn(index) {
this.$refs[this.options[index]][0].$el.focus();
this.chosen = this.options[index];
//plus bounds checking code
}
In addition to this, I
- put listeners on q-btn-dropdown to open it when the down arrow or enter button are pressed and, @show, focus on the currently/last chosen element
- put listener on q-list to exit dropdown (and indicate the last focused item as selected) when tab is pressed