I Need to put focus on cancel button of my confim dialog box.
I work with vue/Quasar. I've a delete button , and before deletion I create a confim dialogbox. It's Ok. But just want the default button focused is "Cancel" not "ok"
this.$q.dialog({
title: 'Confirmation',
message: "Etes-vous sûr de vouloir supprimer l''entité: " ,
ok: 'Suppression',
cancel: {
push: true,
color: 'negative',
label:"Annuler"
},
persistent: true
})
With that it'sok button selectd by default not the cancel button
this.$q.dialog({
title: 'Confirmation',
message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
ok: {
push: true,
label: "Suppression",
tabindex: 1
},
cancel: {
push: true,
color: 'negative',
label: "Annuler",
tabindex: 0
},
persistent: true
})
Change the tabindex but not the autofocus on button
this.$q.dialog({
ref: "ConfirmDialog",
title: 'Confirmation',
message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
ok: {
push: true,
label: "Suppression",
tabindex: 1
},
cancel: {
ref:"btnAnnul",
push: true,
color: 'negative',
label: "Annuler",
tabindex: 0
},
persistent: true,
created: setTimeout(x => {this.$nextTick(() => this.focus());}, 1000)
})
I Progress, Now I can execute after create dialog event, but don't know how access to the button. I see too Autofocus="autofocus" on ok button
Perhpas better if I put my full compoment. It's a tree with option on end of each line. One option is delete. I Create a dialog to ask confirmation.
Vue.component('select-tree-nocheck', {
inject: ['IsConnected', 'showNotifError'],
props: ['treedata'],
template: ' <div class="q-pa-md q-col-gutter-sm">\
<q-input ref="filter" filled v-model="treedata.filter" label="Filtrer">\
<template v-slot: append>\
<q-icon v-if="treedata.filter !== \'\'" name="clear" class="cursor-pointer" v-on:click="resetFilter" />\
</template>\
</q-input>\
<q-tree ref="tree" class="col-12" accordion v-bind:nodes="treedata.nodes" node-key="id" v-bind:filter="treedata.filter">\
<template v-slot:default-header="prop">\
<div class="row">\
<div>{{ prop.node.label }}\
...<q-menu anchor="top right" self="top left"><q-list style="min-width: 100px">\
<q-item clickable v-close-popup><q-item-section v-on:click="Suppression(prop.node.id,prop.node.label)">Supprimer</q-item-section></q-item>\
</q-list></q-menu>\
</div></div>\
</template>\
</q-tree>\
</div>',
methods: {
Suppression(value, libelle) {
this.IsConnected().then(retour => {
if (retour == 1) {
this.$q.dialog({
$ref: "ConfirmDialog",
title: 'Confirmation',
message: "Etes-vous sûr de vouloir supprimer l''entité: " + libelle,
ok: {
push: true,
label: "Suppression",
tabindex: 1
},
cancel: {
$ref:"btnAnnul",
push: true,
color: 'negative',
label: "Annuler",
tabindex: 0
},
persistent: true,
created: setTimeout(x => {this.$nextTick(() => this.focus());}, 1000)
}).onOk(() => {
});
}
});
},
resetFilter() {
this.treedata.filter = '';
this.$refs.filter.focus();
}
},
});
Finally... Instead of search from "this", I use simple javascript function
created: setTimeout(x => { this.$nextTick(() => document.getElementsByClassName('bg-negative')[0].focus()); }, 1000)
It's not beautifull but it works cause I've just one element with specific class bg-negative