"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):

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!