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]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor() {
super(...arguments);
this.buttons = [{
buttonModel: {
content: 'Ok',
isPrimary: true,
},
'click': () => {
this.dialogInstance.hide();
}
}, {
buttonModel: {
content: 'Cancel'
},
'click': () => {
this.dialogInstance.hide();
}
}];
this.onOpen = (args) => {
args.preventFocus = true;
};
}
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>);
}
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;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;
public buttons: any = [{
buttonModel: {
content: 'Ok',
isPrimary: true,
},
'click': () => {
this.dialogInstance.hide();
}
}, {
buttonModel: {
content: 'Cancel'
},
'click': () => {
this.dialogInstance.hide();
}
}];
public dialogContent(): JSX.Element {
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>
)
}
public onOpen = (args: any): void =>{
args.preventFocus = true;
}
public 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;[Functional-component]
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;import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
let dialogInstance: DialogComponent;
const buttons: any = [{
buttonModel: {
content: 'Ok',
isPrimary: true,
},
'click': () => {
dialogInstance.hide();
}
}, {
buttonModel: {
content: 'Cancel'
},
'click': () => {
dialogInstance.hide();
}
}];
function dialogContent(): JSX.Element {
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: any): void {
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;