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 :

    <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 🙂



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