QField template and tabindex problem with vue-imask

[erakis]

Hi,

I use a QField component to wrap a vue-imask component. As explain here
https://quasar.dev/vue-components/input#Using-third-party-mask-processors.

But when the field is empty and I press the TAB key to navigate between elements, the focus is never give to the next input field. However, if the next box does not have an emtpy value this is working. What is causing that and how to fix it ?

Here is an example of the problem
https://codesandbox.io/s/great-shannon-t82qd?file=/src/pages/Index.vue

If you uncoment the first line to use a raw input, the tab navigation work all the time, even if the field is empty. But if you use the i-mask component the navigation by TAB key will only work if the next input is not empty.

          <!-- <input style="width: 200px" value="props.value"> -->
          <i-mask-input v-model="props.row.value"/>

[erakis]

I found it!

The problem is the solution proposed in the help
https://quasar.dev/vue-components/input#Using-third-party-mask-processors

<q-field
  filled
  v-model="price"
  label="Price with v-money directive"
  hint="Mask: $ #,###.00 #"
>
  <template v-slot:control="{ id, floatingLabel, value, emitValue }">
    <input :id="id" class="q-field__input text-right" :value="value" @change="e => emitValue(e.target.value)" v-money="moneyFormatForDirective" v-show="floatingLabel">
  </template>
</q-field>

Removing v-show="floatingLabel" fix the problem.

It make sense becasue when the TAB key is press, the focus should go to the next box but the box is hidden because there no data in it and it doesn’t have the focus.