No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    "tabindex" support for components?

    Framework
    3
    7
    3065
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jvukovich last edited by 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?

      1 Reply Last reply Reply Quote 0
      • J
        jimmack1963 last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • J
          jvukovich last edited by

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

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by 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.

            1 Reply Last reply Reply Quote 0
            • J
              jvukovich last edited by 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!

              1 Reply Last reply Reply Quote 0
              • rstoenescu
                rstoenescu Admin last edited by 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'}" ...

                1 Reply Last reply Reply Quote 0
                • J
                  jvukovich last edited by

                  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!

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post