Prevent focus to previous element in Vue Dialog component

30 Aug 20256 minutes to read

By default, when the dialog is closed, focus returns to the element that was previously focused before the dialog opened. You can prevent this behavior using the beforeClose event and setting the preventFocus argument to true.

Bind the beforeClose event and enable the preventFocus argument as shown in the sample below.

<template>
  <div>
    <div id="target" class="control-section" style="height: 300px; position: relative;">
      <!-- Render Button to open the Dialog -->
      <ejs-button id="openBtn" @click="openDialog">Open</ejs-button>

      <!-- Render Dialog -->
      <ejs-dialog
        id="dialog"
        ref="dialogRef"
        :header="header"
        :content="content"
        :showCloseIcon="true"
        :buttons="buttons"
        :target="target"
        :width="width"
        :height="height"
        :animationSettings="animationSettings"
        :beforeClose="beforeClose"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';

const dialogRef = ref(null);
const target = 'body';
const header = 'Delete Multiple Items';
const content = 'Are you sure you want to permanently delete all of these items?';
const width = '300px';
const height = 'auto';
const animationSettings = { effect: 'Zoom' };

const openDialog = () => {
  dialogRef.value.show();
};

const closeDialog = () => {
  dialogRef.value.hide();
};

const beforeClose = (args) => {
  args.preventFocus = true;
};

const buttons = [
  {
    buttonModel: { isPrimary: true, content: 'Yes' },
    click: closeDialog,
  },
  {
    buttonModel: { content: 'No' },
    click: closeDialog,
  },
];
</script>

<style>

body {
  padding-top: 100px;
}

.control-section {
  height: 100%;
  min-height: 200px;
}
</style>
<template>
  <div>
    <div id="dialogTarget" class="control-section" style="height:300px; position:relative;">
      <!-- Render Button to open the Dialog -->
      <ejs-button id="dlgbtn" @click="dialogBtnClick">open</ejs-button>

      <!-- Render Dialog -->
      <ejs-dialog
        id="dialog"
        ref="Dialog"
        :header="header"
        :content="content"
        :showCloseIcon="true"
        :buttons="buttons"
        :target="target"
        :width="width"
        :height="height"
        :animationSettings="animationSettings"
        :beforeClose="beforeClose"
      />
    </div>
  </div>
</template>

<script>
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-dialog": DialogComponent
  },
  data: function() {
    return {
      target: "#dialogTarget",
      header: "Delete Multiple Items",
      content: "Are you sure you want to permanently delete all of these items?",
      width: "300px",
      height: "auto",
      animationSettings: { effect: "Zoom" },
      buttons: [
        {
          buttonModel: { isPrimary: true, content: "Yes" },
          click: this.dlgButtonClick
        },
        {
          buttonModel: { content: "No" },
          click: this.dlgButtonClick
        }
      ]
    };
  },
  methods: {
    dialogBtnClick() {
      this.$refs.Dialog.show();
    },
    dlgButtonClick() {
      this.$refs.Dialog.hide();
    },
    beforeClose(args) {
      args.preventFocus = true;
    }
  }
};
</script>

<style>

body {
  padding-top: 100px;
}

.control-section {
  height: 100%;
  min-height: 200px;
}
</style>