Bug : q-input send focus event before blur in Quasar v1.6.1 [resolved]

Greg

When i leave q-input A to q-input B, “focus B” event is throwed before “blur A” !

To reproduce :

<template>
  <section>
    <div>
      <h1>Bad</h1>
      <q-input @focus="onFocus('A')" @blur="onBlur('A')" label="A" />
      <q-input @focus="onFocus('B')" @blur="onBlur('B')" label="B" />
    </div>
    <div>
      <h1>Good</h1>
      <input @focus="onFocus('A')" @blur="onBlur('A')" placeholder="A" />
      <input @focus="onFocus('B')" @blur="onBlur('B')" placeholder="B" />
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    onFocus (e) {
      console.log(`focus ${e}`)
    },
    onBlur (e) {
      console.log(`blur ${e}`)
    }
  }
}
</script>

Thanks for Help

metalsadman

@Greg it’s mostlikely a browser quirk, try adding a @mousedown.prevent on your other qinput, could also try re arranging your event listeners.

Greg

@metalsadman
Unfortunately no, I just created a blank project with this code and there is the same problem with all browsers.

Adding @mousedown.prevent to my other widgets doesn’t seem like a good idea.

I am only alerting to this problem, if there is no solution i will use addeventlistener on the underlying input .

Greg

Bug submited today : https://github.com/quasarframework/quasar/issues/6034

Codepen : https://codepen.io/ggregg/pen/ExaENLy

Greg

Bug closed.

Dan Popescu say :

This happens because a timeout is required to check if the blur event in QField and derived components will not be followed by a refocus on the same component.
If you need to have the exact order of events, but with possible duplicated events then you can listen on @focusin and @focusout.

Example here: https://codepen.io/pdanpdan/pen/YzPaZPm