No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    5
    1510
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      Greg last edited by 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 🙂

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by 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.

        G 1 Reply Last reply Reply Quote 0
        • G
          Greg @metalsadman last edited by 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 😃 .

          1 Reply Last reply Reply Quote 0
          • G
            Greg last edited by

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

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

            1 Reply Last reply Reply Quote 0
            • G
              Greg last edited by 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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post