title: Quasar's clearble q-input problem with focus
body: <p>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</p>
  <pre><code>&lt;q-input outlined clearable v-model=&quot;user.surname&quot; type=&quot;text&quot; label=&quot;Surname&quot; :rules=&quot;[val =&gt; !!val || 'Surename is required']&quot; /&gt;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#marg {
  padding:50px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;!--
      WARNING! Make sure that you match all Quasar related
      tags to the same version! (Below it's "@1.14.0")
    --&gt;
  
    &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"&gt;
      &lt;link href="https://cdn.jsdelivr.net/npm/quasar@1.14.0/dist/quasar.min.css" rel="stylesheet" type="text/css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!-- Add the following at the end of your body tag --&gt;
      
      &lt;script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/quasar@1.14.0/dist/quasar.umd.min.js"&gt;&lt;/script&gt;
      &lt;div id="q-app"&gt;
      &lt;template&gt;
        &lt;q-layout&gt;
          &lt;q-page-container&gt;
            &lt;q-page class="window-height"&gt;
              &lt;div id="marg"&gt;&lt;/div&gt;
              &lt;div class="q-gutter-md"&gt;
                  &lt;q-input clearable filled v-model="text" label="Filled" /&gt;      
              &lt;/div&gt;
                 &lt;spam&gt;when you tab in the first input the focus doesn't goes to the seccond input inmedatly&lt;/spam&gt;
              &lt;div class="q-gutter-md"&gt;
                  &lt;q-input clearable filled v-model="text" label="OTHER" /&gt;      
              &lt;/div&gt;
            &lt;/q-page&gt;
          &lt;/q-page-container&gt;
        &lt;q-layout&gt;
      &lt;/template&gt;
      &lt;/div&gt; 
      &lt;script&gt;
        
        new Vue({
          el: '#q-app',
          
          data: function () {
            return {
              text: 'Write me and then tab me',
            }
          },
          methods: {},
          // ...etc
        })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>thanks guys</p>