Prevent focus to previous element in React Dialog component

29 Aug 202510 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.

[Class-component]

app.jsx

import React, { useState } from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div id="container" style=>
      <ButtonComponent onClick={handleOpen}>Open</ButtonComponent>
      <DialogComponent
        header="Delete Multiple Items"
        content="Are you sure you want to permanently delete all of these items?"
        showCloseIcon={true}
        visible={visible}
        width="300px"
        animationSettings=
        target="#container"
        beforeClose={(args) => {
          args.preventFocus = true;
           
        }}
        close={handleClose}
        buttons={[
          {
            buttonModel: { isPrimary: true, content: 'Yes' },
            click: handleClose,
          },
          {
            buttonModel: { content: 'No' },
            click: handleClose,
          },
        ]}
      />
    </div>
  );
};

export default App;

app.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [visible, setVisible] = React.useState(false);

  const handleOpen = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div id="container" style=>
      <ButtonComponent onClick={handleOpen}>Open</ButtonComponent>
      <DialogComponent
        header="Delete Multiple Items"
        content="Are you sure you want to permanently delete all of these items?"
        showCloseIcon={true}
        visible={visible}
        width="300px"
        animationSettings=
        target="#container"
        beforeClose={(args) => {
          args.preventFocus = true;
        }}
        close={handleClose}
        buttons={[
          {
            buttonModel: { isPrimary: true, content: 'Yes' },
            click: handleClose,
          },
          {
            buttonModel: { content: 'NO' },
            click: handleClose,
          },
          
        ]}
      />
    </div>
  );
}

export default App;

[Functional-component]

app.jsx

import React, { useState } from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div id="container" style=>
      <ButtonComponent onClick={handleOpen}>Open</ButtonComponent>
      <DialogComponent
        header="Delete Multiple Items"
        content="Are you sure you want to permanently delete all of these items?"
        showCloseIcon={true}
        visible={visible}
        width="300px"
        animationSettings=
        target="#container"
        beforeClose={(args) => {
          args.preventFocus = true;
           
        }}
        close={handleClose}
        buttons={[
          {
            buttonModel: { isPrimary: true, content: 'Yes' },
            click: handleClose,
          },
          {
            buttonModel: { content: 'No' },
            click: handleClose,
          },
        ]}
      />
    </div>
  );
};

export default App;

app.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [visible, setVisible] = React.useState(false);

  const handleOpen = () => {
    setVisible(true);
  };

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <div id="container" style=>
      <ButtonComponent onClick={handleOpen}>Open</ButtonComponent>
      <DialogComponent
        header="Delete Multiple Items"
        content="Are you sure you want to permanently delete all of these items?"
        showCloseIcon={true}
        visible={visible}
        width="300px"
        animationSettings=
        target="#container"
        beforeClose={(args) => {
          args.preventFocus = true;
        }}
        close={handleClose}
        buttons={[
          {
            buttonModel: { isPrimary: true, content: 'Yes' },
            click: handleClose,
          },
          {
            buttonModel: { content: 'NO' },
            click: handleClose,
          },
          
        ]}
      />
    </div>
  );
}

export default App;