Prevent the focus on the first element in React Dialog component

18 Jan 202314 minutes to read

By default, the dialog focuses on the first elements of the content area which can be active and focusable. You can prevent this default focusing behavior using the open event and by enabling the preventFocus argument.

Bind the open event and enable the preventFocus argument within an event like the below sample.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'Ok',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }, {
            buttonModel: {
                content: 'Cancel'
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    dialogContent() {
        return (<div className='form-group'><label htmlFor='email'>Email:</label>
            <input type='email' className='form-control' id='email'/>
        </div>
            ,
                <div className='form-group'>
            <label htmlFor='comment'>Password:</label>
            <input type='password' className='form-control' id='password'/>
        </div>);
    }
    onOpen = (args) => {
        args.preventFocus = true;
    };
    render() {
        return (<div className="App" id='container'>  
        <DialogComponent id="dlg-focus" width='300px' isModal={true} target='#container' header='Sign In' open={this.onOpen} 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 { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public dialogObj: DialogComponent;
  private buttonRef;
  private buttonElement: HTMLElement | null;
  constructor(props: {}) {
    super(props);
    this.buttonElement = null;
    this.buttonRef = element => {
        this.buttonElement = element;
    };
  }
  public buttons: any = [{
    buttonModel: {
        content: 'Ok',
        isPrimary: true,
    },
    'click': () => {
        this.dialogObj.hide();
    }
  }, {
    buttonModel: {
        content: 'Cancel'
    },
    'click': () => {
        this.dialogObj.hide();
    }
  }];

  
  public onOpen = (args: any): void =>{
      args.preventFocus = true;
  }
  public onOpenDialog = function(): void {
    // Call the show method to open the Dialog
     this.dialogObj.show();
     this.buttonElement.style.display='none';
  };

  public onClose= function():void{
    this.buttonElement.style.display='block';
  }
  
  public render() {
    return (
    <div className="App" id='container'>
        <button className="e-control e-btn" style= ref={this.buttonRef} onClick={this.onOpenDialog.bind(this)}>Open dialog</button>
        <DialogComponent id="dialog" width='300px' isModal={true} target='#container' header='Sign In' close={this.onClose} open={this.onOpen} buttons={this.buttons} ref={dialog => this.dialogObj = dialog}>
          <div className='form-group'><label htmlFor='email'>Email:</label>
            <input type='email' className='form-control' id='email' />
          </div>
          <div className='form-group'>
                <label htmlFor='comment'>Password:</label>
                <input type='password' className='form-control' id='password' />
          </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;
    const buttons = [{
            buttonModel: {
                content: 'Ok',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        }, {
            buttonModel: {
                content: 'Cancel'
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function dialogContent() {
        return (<><div className='form-group'><label htmlFor='email'>Email:</label>
          <input type='email' className='form-control' id='email'/>
      </div><div className='form-group'>
              <label htmlFor='comment'>Password:</label>
              <input type='password' className='form-control' id='password'/>
          </div></>);
    }
    function onOpen(args) {
        args.preventFocus = true;
    }
    return (<div className="App" id='container'>  
          <DialogComponent id="dlg-focus" width='300px' isModal={true} target='#container' header='Sign In' open={onOpen} 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 dialogObj: DialogComponent;
    let buttonElement: HTMLElement;
    let buttonRef: React.Ref<HTMLButtonElement> = (element) => {
        buttonElement = element;
    };
    const buttons: any = [{
      buttonModel: {
          content: 'Ok',
          isPrimary: true,
      },
      'click': () => {
          dialogObj.hide();
      }
    }, {
      buttonModel: {
          content: 'Cancel'
      },
      'click': () => {
          dialogObj.hide();
      }
    }];

    function onOpen (args: any): void {
        args.preventFocus = true;
    }

    function onOpenDialog() {
        dialogObj.show();
        buttonElement.style.display = 'none';
    };

    function onClose(){
        buttonElement.style.display = 'block';
    }

    return (
      <div className="App" id='container'>
        <button className="e-control e-btn" style= ref={buttonRef} onClick={onOpenDialog.bind(this)}>Open dialog</button> 
          <DialogComponent id="dialog" close={onClose} width='300px' isModal={true} target='#container' header='Sign In' open={onOpen} buttons={buttons} ref={dialog => dialogObj = dialog}>
            <div className='form-group'><label htmlFor='email'>Email:</label>
                <input type='email' className='form-control' id='email' />
            </div>
            <div className='form-group'>
              <label htmlFor='comment'>Password:</label>
              <input type='password' className='form-control' id='password' />
            </div>
           </DialogComponent>
      </div>
    );
}
export default App;