Prevent closing of modal dialog in React Dialog component

18 Jan 202322 minutes to read

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

[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 minimum 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 minimum 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 minimum 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 minimum 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;