"tabindex" support for components?

[jvukovich]

We have some pretty elaborate forms in our application, which require the use of the tabindex attribute to help with user navigation/workflow (desktop). I noticed when trying to set this attribute on Quasar components: it does not render. Could it be added? Or, better yet, add a way to pass custom attributes to input components?

[jimmack1963]

This has worked for me in vue 2 (not quasar specifically):

<textarea v-model.lazy=“updating” ref=“input” :class="‘input-spot-’ + spot.d" :tabindex=“tabIdx”></textarea>

I set a lot of tabindexes to -1 to get the result I want, which is probably heresy.

[jvukovich]

Thanks. That works. I am specifically talking about the Quasar components not having this support, though.

[rstoenescu]

Make a list of components not having it and it’ll be taken care of. Thanks!
Most form components (if not all) have it if u are on v0.14.x.

[jvukovich]

Okay, thanks! I am on 0.14.4 and trying it with QInput: <q-input name=“email” type=“email” float-label=“Email” v-model=“email” tabindex=“3”/>

However, tabindex does not get rendered, nor (obviously) work during tabbing.

I checked the v0.14 branch and do not see tabindex:
https://github.com/quasarframework/quasar/blob/v0.14/src/components/input/QInput.vue

I may likely be missing something.

Thanks!

[rstoenescu]

@jvukovich <input> tags do not need tabindex, but in case you need a specific tabindex value, you’ll be able to add it through the new “attributes” Object prop in v0.14.7 (currently available in edge). Example <q-input :attributes="{tabindex: '3'}" ...

[jvukovich]

Yes, in some cases, we need to provide specific tabindex values due to the nature and complexity of some of the forms in our app. Great, thank you so much!