How can I disable keyboard navigation/set tabindex for q-expansion-items?
-
TLDR: My issue is with tabindex and q-expansion-item: When tabbing away from the previous input, I don’t want to focus the expansion item (default behaviour). I’d like the focus to move straight to the next input.
I have a form which uses a q-input/q-checkbox inside the :header slot of an expansion-item. The idea being the conditional rendering of a follow-up field within the expansion content. I’d love keyboard navigation to skip straight to the input.
The tabindex attribute doesn’t work for me on q-expansion-item, nor does the @focus event, or adding helper classes such as non-selectable to the expansion item or its header-class attribute (@focus and tabindex aren’t listed in the API docs for expansion-item - they are however available for q-item, which it says expansion-item is a version of). Also tried :attributes="{tabindex: ‘-1’}" Fiddling with those same things on the header slot contents doesn’t work either.
Am I missing something, or is quasar missing something? Are there any other approaches I could take here?
-
-
@dobbel
Thanks for the response. I guess what you are saying is that I should add a keydown listener in my inputs and override tab behaviour, setting focus manually. I was kind of hoping to hear that I was doing something wrong with :tabindex or that the API for q-expansion-item does in fact manage this somehow. But I had overlooked this approach, so thanks. Things will get a little more janky because I am inside a v-for, but it should work.Also, I had no idea that MDN had it’s own docs for Vue, so that’s cool to know.
-
@dmoylan I was surprised too about MDN!
