Quasar 的 clearble q-input problem with focus

Question

我对 clearble 输入有问题，因为当输入失去焦点时，焦点会转到 (x) 而不会转到另一个输入我希望 (x) 按钮没有焦点

<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/quasar@1.14.0/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/quasar@1.14.0/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>

谢谢大家

Answer 1

查看 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>

如果您使用的是作用域插槽，您将拥有更多控制权。您甚至可以添加 tabindex 属性。

Quasar 的 clearble q-input problem with focus

Quasar's clearble q-input problem with focus

vue.js

quasar-framework