diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue index e4d9ed3e3..29bdc4934 100755 --- a/src/components/dialog/Dialog.vue +++ b/src/components/dialog/Dialog.vue @@ -123,9 +123,9 @@ export default { } }, focus() { - let focusable = DomHandler.getFocusableElements(this.$refs.dialog); - if (focusable && focusable.length) { - focusable[0].focus(); + let focusTarget = this.$refs.dialog.querySelector('[autofocus]'); + if (focusTarget) { + focusTarget.focus(); } }, maximize() { diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue index b8b73b3c8..114732d93 100755 --- a/src/views/dialog/DialogDemo.vue +++ b/src/views/dialog/DialogDemo.vue @@ -18,7 +18,7 @@ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -40,7 +40,7 @@ eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

@@ -52,7 +52,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -64,7 +64,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -92,7 +92,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue index 4dc7f19fa..f77efbe68 100755 --- a/src/views/dialog/DialogDoc.vue +++ b/src/views/dialog/DialogDoc.vue @@ -10,11 +10,8 @@ import Dialog from 'primevue/dialog';
Getting Started

Dialog is used as a container and visibility is managed with visible property that requires the sync operator for two-way binding.

-<Dialog header="Godfather I" :visible.sync="display" > - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. +<Dialog header="Header" :visible.sync="display" > + Content </Dialog> @@ -31,7 +28,7 @@ export default {
Header and Footer

Header and Footer sections are defined using properties with the same name that accept simple strings or with the header and footer templates for custom content.

-<Dialog header="Header Text" footer="Footer Text" :visible.sync="display"> +<Dialog header="Header" footer="Footer" :visible.sync="display"> Content </Dialog> @@ -43,9 +40,10 @@ export default { </template> Content + <template #footer> - <Button label="Yes" icon="pi pi-check" /> <Button label="No" icon="pi pi-times" class="p-button-text"/> + <Button label="Yes" icon="pi pi-check" autofocus /> </template> </Dialog> @@ -64,6 +62,18 @@ export default { <Dialog :visible.sync="display" :contentStyle="{overflow: 'visible'}"> Content </Dialog> + + +
Initial Focus
+

Adding autofocus to an element in the dialog makes it the initial focus target when dialog gets shown.

+ +<Dialog :visible.sync="display"> + Content + <template #footer> + <Button label="No" /> + <Button label="Yes" autofocus/> + </template> +</Dialog>
Properties
@@ -242,7 +252,7 @@ export default { Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <template #footer> <Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-text"/> - <Button label="Yes" icon="pi pi-check" @click="closeBasic" /> + <Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus /> </template> </Dialog> @@ -264,7 +274,7 @@ export default { eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p> <template #footer> <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-text"/> - <Button label="Yes" icon="pi pi-check" @click="closeBasic2" /> + <Button label="Yes" icon="pi pi-check" @click="closeBasic2" autofocus /> </template> </Dialog> @@ -276,7 +286,7 @@ export default { Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <template #footer> <Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-text"/> - <Button label="Yes" icon="pi pi-check" @click="closeModal" /> + <Button label="Yes" icon="pi pi-check" @click="closeModal" autofocus /> </template> </Dialog> @@ -288,7 +298,7 @@ export default { Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <template #footer> <Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-text"/> - <Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /> + <Button label="Yes" icon="pi pi-check" @click="closeMaximizable" autofocus /> </template> </Dialog> @@ -316,7 +326,7 @@ export default { Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <template #footer> <Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-text"/> - <Button label="Yes" icon="pi pi-check" @click="closePosition" /> + <Button label="Yes" icon="pi pi-check" @click="closePosition" autofocus /> </template> </Dialog>