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 submited today : https://github.com/quasarframework/quasar/issues/6034
Codepen : https://codepen.io/ggregg/pen/ExaENLy
-
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