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

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

    To reproduce :

          <q-input @focus="onFocus('A')" @blur="onBlur('A')" label="A" />
          <q-input @focus="onFocus('B')" @blur="onBlur('B')" label="B" />
          <input @focus="onFocus('A')" @blur="onBlur('A')" placeholder="A" />
          <input @focus="onFocus('B')" @blur="onBlur('B')" placeholder="B" />
    export default {
      methods: {
        onFocus (e) {
          console.log(`focus ${e}`)
        onBlur (e) {
          console.log(`blur ${e}`)

    Thanks for Help 🙂

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

  • @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 😃 .

  • 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

Log in to reply