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

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

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

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

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

Is it possible to open QSelect options on focus or by using a method ?
Thank

If it could help,

For well debuging in chrome or visual studio code on mac osx,
I have to replace devtool param in webpack.dev.conf.js
#cheap-module-eval-source-map by #eval-source-map

Like this :
module.exports = merge(baseWebpackConfig, {
// eval-source-map is faster for development
devtool: ‘#eval-source-map’, // ‘#cheap-module-eval-source-map’,
…
}

Hope

Hello
Resolved by using path and exact directives.

<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ path: ‘/showcat/’ + cat.code, exact: true }">
{{ cat.nom }}
</q-drawer-link>

Hello

I relatively same problem with named route like this.

<q-drawer-link v-for=“cat in getUserCategorieList” icon=“pages” :to="{ name: ‘showcat’, params: { code: cat.code } }">
{{ cat.nom }}
</q-drawer-link>

routes: [{
        path: '/demarrage',
        component: load('demarrage'),
        name: 'demarrage'
    },
    {
        path: '/profil',
        component: load('profil'),
        name: 'profil'
    },
    {
        path: '/',
        component: load('Index'),
        children: [{
                path: '/accueil/',
                component: load('accueil'),
                name: 'accueil'
            },
            {
                path: '/showcat/:code',
                component: load('listcat'),
                name: 'showcat',
                props: true
            },
            {
                path: '*',
                redirect: { name: 'accueil' }
            }
        ]
    },
    // Default
    { path: '*', component: load('Error404') } // Not found
]

})

In my case, links and router works fine but all q-drawer-link are selected

Thank for help.

It would be really great if you could just develop in cordova browser mode.
For the moment, the only solution I found is to manually add the tag <script type=“text/javascript” src=“cordova.js”></script> to use this mode.