How to prevent closing of modal in React Dialog

4 Sep 202622 minutes to read

You can prevent a modal dialog from closing by setting the args.cancel property of the beforeClose event to true. The beforeClose event receives an args object whose cancel property can be set to true to abort the close action. Related properties such as closeOnEscape and showCloseIcon should also be set to false to prevent the user from closing the dialog via the Esc key or the close icon.

In the following sample, the React Dialog closes only when both validation rules pass: the username must be at least 4 characters long AND the password must be non-empty. Otherwise, the React Dialog cannot be closed.

The sample uses custom CSS classes (login-form, wrap, e-float-input, e-float-line, e-float-text) for the login form layout. Ensure the supporting CSS (for example, a login-form stylesheet) is loaded in your application for the sample to render correctly.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    userName;
    password;
    buttons = [{
            buttonModel: {
                content: 'LOG IN',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    dialogContent() {
        return (<div className="login-form">
          <div className='wrap'>
              <div id="heading"/>
              <div className="e-float-input">
                  <input id="textvalue" type="text" ref={user => this.userName = user} required={true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Username</label>
              </div>
              <div className="e-float-input">
                  <input id="textvalue2" type="password" ref={pwd => this.password = pwd} required={true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Password</label>
              </div>
          </div>
      </div>);
    }
    validation = (args) => {
        if (this.userName.value === "" && this.password.value === "") {
            args.cancel = true;
            alert("Enter the username and password");
        }
        else if (this.userName.value === "") {
            args.cancel = true;
            alert("Enter the username");
        }
        else if (this.userName.value === "") {
            args.cancel = true;
            alert("Enter the password");
        }
        else if (this.userName.value.length < 4) {
            args.cancel = true;
            alert("Username must be at least 4 characters");
        }
        else {
            args.cancel = false;
            this.userName.value = "";
            this.password.value = "";
        }
    };
    render() {
        return (<div className="App" id='container'>
  
        <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape={false} beforeClose={this.validation} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
         <div>{this.dialogContent()}</div>
         </DialogComponent>
    </div>);
    }
}
export default App;

app.tsx

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

class App extends React.Component<{}, {}> {
  public dialogInstance: DialogComponent;
  public userName: HTMLInputElement;
  public password: HTMLInputElement;
  public buttons: any = [{
    buttonModel: {
        content: 'LOG IN',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
  }];

  public dialogContent(): JSX.Element {
    return (
      <div className="login-form">
          <div className='wrap'>
              <div id="heading"/>
              <div className="e-float-input">
                  <input id="textvalue" type="text" ref = {user => this.userName = user!} required = {true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Username</label>
              </div>
              <div className="e-float-input">
                  <input id="textvalue2" type="password" ref = {pwd => this.password = pwd!} required = {true}/>
                  <span className="e-float-line"/>
                  <label className="e-float-text">Password</label>
              </div>
          </div>
      </div>
    )
  }
  
  public validation = (args: any): void =>{
      if (this.userName.value === "" && this.password.value === "") {
          args.cancel= true;
          alert("Enter the username and password")
      } else if (this.userName.value === "") {
          args.cancel= true;
          alert("Enter the username")
      } else if (this.userName.value === "") {
          args.cancel= true;
          alert("Enter the password")
      } else if (this.userName.value.length < 4) {
          args.cancel= true;
          alert("Username must be at least 4 characters")
      } else {
          args.cancel= false;
          this.userName.value = "";
          this.password.value = "";
      }
  }
  
  public render() {
    return (
    <div className="App" id='container'>
  
        <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape = {false}
         beforeClose={this.validation} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
         <div>{this.dialogContent()}</div>
         </DialogComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    let userName;
    let password;
    const buttons = [{
            buttonModel: {
                content: 'LOG IN',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function dialogContent() {
        return (<div className="login-form">
        <div className='wrap'>
            <div id="heading"/>
            <div className="e-float-input">
                <input id="textvalue" type="text" ref={user => userName = user} required={true}/>
                <span className="e-float-line"/>
                <label className="e-float-text">Username</label>
            </div>
            <div className="e-float-input">
                <input id="textvalue2" type="password" ref={pwd => password = pwd} required={true}/>
                <span className="e-float-line"/>
                <label className="e-float-text">Password</label>
            </div>
        </div>
    </div>);
    }
    function validation(args) {
        if (userName.value === "" && password.value === "") {
            args.cancel = true;
            alert("Enter the username and password");
        }
        else if (userName.value === "") {
            args.cancel = true;
            alert("Enter the username");
        }
        else if (userName.value === "") {
            args.cancel = true;
            alert("Enter the password");
        }
        else if (userName.value.length < 4) {
            args.cancel = true;
            alert("Username must be at least 4 characters");
        }
        else {
            args.cancel = false;
            userName.value = "";
            password.value = "";
        }
    }
    return (<div className="App" id='container'>
        <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape={false} beforeClose={validation} buttons={buttons} ref={dialog => dialogInstance = dialog}>
        <div>{dialogContent()}</div>
        </DialogComponent>
    </div>);
}
export default App;

app.tsx

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

function App(){
    let dialogInstance: DialogComponent;
    let userName: HTMLInputElement;
    let password: HTMLInputElement;
    const buttons: any = [{
      buttonModel: {
          content: 'LOG IN',
          cssClass: 'e-flat',
          isPrimary: true,
      },
      'click': () => {
          dialogInstance.hide();
      }
    }];

function dialogContent(): JSX.Element {
    return (
    <div className="login-form">
        <div className='wrap'>
            <div id="heading"/>
            <div className="e-float-input">
                <input id="textvalue" type="text" ref = {user => userName = user!} required = {true}/>
                <span className="e-float-line"/>
                <label className="e-float-text">Username</label>
            </div>
            <div className="e-float-input">
                <input id="textvalue2" type="password" ref = {pwd => password = pwd!} required = {true}/>
                <span className="e-float-line"/>
                <label className="e-float-text">Password</label>
            </div>
        </div>
    </div>
    )
}
function validation(args: any): void {
    if (userName.value === "" && password.value === "") {
        args.cancel= true;
        alert("Enter the username and password")
    } else if (userName.value === "") {
        args.cancel= true;
        alert("Enter the username")
    } else if (userName.value === "") {
        args.cancel= true;
        alert("Enter the password")
    } else if (userName.value.length < 4) {
        args.cancel= true;
        alert("Username must be at least 4 characters")
    } else {
        args.cancel= false;
        userName.value = "";
        password.value = "";
    }
}
return (
    <div className="App" id='container'>
        <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape = {false}
        beforeClose={validation} buttons={buttons} ref={dialog => dialogInstance = dialog!}>
        <div>{dialogContent()}</div>
        </DialogComponent>
    </div>
    );
}
export default App;