How to close when click outside of its region in React Dialog

4 Sep 202611 minutes to read

The hide method closes the React Dialog programmatically. It accepts an optional animationSettings object argument that controls the close animation; if omitted, the React Dialog’s configured animationSettings (a Zoom effect in the samples below) is used.

In the following sample, the React Dialog is closed when clicking outside the React Dialog area using the hide method.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'Close',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    handleClick() {
        this.dialogInstance.show();
    }
    componentDidMount() {
        document.onclick = (args) => {
            if (args.target.id === 'dialog-target') {
                this.dialogInstance.hide();
            }
        };
    }
    render() {
        return (<div className="App" id='dialog-target'>
    <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
    <DialogComponent header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={this.settings} width='300px' buttons={this.buttons} closeOnEscape={true} content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog} target='#dialog-target'/>
    </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
  public dialogInstance: DialogComponent;
  public buttons: any = [{
      buttonModel: {
          content: 'Close',
          cssClass: 'e-flat',
          isPrimary: true,
      },
      'click': () => {
          this.dialogInstance.hide();
      }
  }];
  
  public handleClick() {
      this.dialogInstance.show();
  }
  
  public componentDidMount() {
      document.onclick = (args: any) : void => {
          if(args.target.id === 'dialog-target') {
              this.dialogInstance.hide();
          }
      }
  }
  
  public render() {
    return (
    <div className="App" id='dialog-target'>
    <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
    <DialogComponent header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={this.settings}
      width='300px' buttons={this.buttons} closeOnEscape={true}
      content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog!}
      target='#dialog-target'/>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    const settings = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance;
    const buttons = [{
            buttonModel: {
                content: 'Close',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function handleClick() {
        dialogInstance.show();
    }
    function componentDidMount() {
        document.onclick = (args) => {
            if (args.target.id === 'dialog-target') {
                dialogInstance.hide();
            }
        };
    }
    return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
      <DialogComponent header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={settings} width='300px' buttons={buttons} closeOnEscape={true} content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog} target='#dialog-target'/>
    </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    const settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance: DialogComponent;
    const buttons: any = [{
        buttonModel: {
            content: 'Close',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            dialogInstance.hide();
        }
    }];

    function handleClick() {
        dialogInstance.show();
    }

    function componentDidMount() {
        document.onclick = (args: any) : void => {
            if(args.target.id === 'dialog-target') {
                dialogInstance.hide();
            }
        }
    }

    return (
      <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
      <DialogComponent header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={settings}
        width='300px' buttons={buttons} closeOnEscape={true}
        content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog!}
        target='#dialog-target'/>
    </div>);
}
export default App;