3. "tabindex" support for components?

"tabindex" support for components?

  • J

    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?

    0
  • J

    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.

    0
  • J

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

    0
  • Admin

    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.

    0
  • J

    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!

    0
  • Admin

    @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'}" ...

    0
  • J

    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!

    0