Quasar's clearble q-input problem with focus

Question

Quasar's clearble q-input problem with focus

5.2k views Asked by davdomin At 23 November 2024 at 17:40

I have a problem with the clearble input because then when the input lost the focus then the focus goes to the (x) and no to the other input I want the the (x) button doesn't have a focus

<q-input outlined clearable v-model="user.surname" type="text" label="Surname" :rules="[val => !!val || 'Surename is required']" />

#marg {
padding:50px
}

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.14.0")
  -->

  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <!-- Add the following at the end of your body tag -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
    <template>
      <q-layout>
        <q-page-container>
          <q-page class="window-height">
            <div id="marg"></div>
            <div class="q-gutter-md">
                <q-input clearable filled v-model="text" label="Filled" />      
            </div>
               <spam>when you tab in the first input the focus doesn't goes to the seccond input inmedatly</spam>
            <div class="q-gutter-md">
                <q-input clearable filled v-model="text" label="OTHER" />      
            </div>
          </q-page>
        </q-page-container>
      <q-layout>
    </template>
    </div> 
    <script>
      
      new Vue({
        el: '#q-app',
        
        data: function () {
          return {
            text: 'Write me and then tab me',
          }
        },
        methods: {},
        // ...etc
      })
    </script>
  </body>
</html>

thanks guys

Original Q&A

There are 2 answers

MustafaSoycan On 03 January 2024 at 07:45

You can use the "tabindex" for this. I ran into the same issue and that's how you fix it:

Example:

<q-form>
 <q-input clearable tabindex="1">
 </q-input>

 <q-input clearable tabindex="2">
 </q-input>
</q-form>

That should ignore the "clearable" button and switch direct to the next inputfield.

**Tnc Andrei** · Accepted Answer · 2020-09-29 11:56:07

Check out the second example from Clearable input

      <q-input color="orange" filled v-model="text" label="Label">
        <template v-if="text" v-slot:append>
          <q-icon name="cancel" @click.stop="text = null" class="cursor-pointer" />
        </template>
      </q-input>

You have more control if you're using scoped slots. You could even add a tabindex attribute.

TechQA.

Quasar's clearble q-input problem with focus

There are 2 answers

Related Questions in VUE.JS

Related Questions in QUASAR-FRAMEWORK

Popular Questions

Popular Tags

Trending Questions