I found a way to make it work by testing… but it is really weird ???
this.$refs.studentName.focus();
doesn’t work…
But if I write 2 times…
this.$refs.studentName.focus();
this.$refs.studentName.focus();
It works ???
Can someone explain me how is it possible ???
Thanks again.
EDIT : Damned, if I launch it from an other button (from a Q-dialog)… It doesn’t work anymore !
<q-input outlined class="col" type="text" v-model="student" ref="studentName" placeholder="Nom de l'élève" style="margin-right : 20px">
<template v-slot:prepend>
<q-icon name="person" />
</template>
</q-input>
<q-btn-group class="col">
<q-btn color="primary" @click="confirmTestFocus = true" label="Charger les copies" icon="refresh" class="col" />
<q-btn-dropdown outline auto-close color="primary" icon="menu">
<!-- dropdown content goes here -->
<q-list padding style="width: 250px">
<q-item clickable @click="testFocusSUCCESS">
<q-item-section avatar>
<q-avatar icon="folder" color="primary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>Ouvrir le dossier temporaire</q-item-label>
</q-item-section>
</q-item>
<q-separator inset />
</q-list>
</q-btn-dropdown>
</q-btn-group>
<q-dialog v-model="confirmTestFocus" persistent>
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="refresh" color="primary" text-color="white" />
<span class="q-ml-sm">Attention, toutes les associations actuelles seront supprimées !</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Annuler" color="primary" v-close-popup />
<q-btn @click="testFocusFAIL" label="Charger les copies" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
testFocusSUCCESS () {
this.$refs.studentName.focus();
this.$refs.studentName.focus();
}
testFocusFAIL () {
this.$refs.studentName.focus();
this.$refs.studentName.focus();
}
I really don’t understand… ?