JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Prevent the focus on the first element in JavaScript Dialog control

23 Mar 2023 / 1 minute 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.

Source
Preview
app.ts
index.html
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog, OpenEventArgs } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    header: "Sign In",
    buttons: [{ buttonModel: { isPrimary: true, content: 'Yes' }, click: btnClick }, { buttonModel: { content: 'No'}, click: btnClick }],
    target: document.getElementById("container"),
    height: 'auto',
    width: '300px',
    open: onOpen
});
dialogObj.appendTo('#dialog');

document.getElementById('targetButton').onclick = (): void => {
    dialogObj.show();
};

function btnClick() {
    dialogObj.hide();
}

function onOpen(args: OpenEventArgs) {
  args.preventFocus = true;
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Dialog with header</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;" >Open Dialog</button>
        <div id='dialog'>
            <div class='form-group'><label for='email'>Email:</label>
                <input type='email' class='form-control' id='email'>
            </div>
            <div class='form-group'>
                <label for='comment'>Password:</label>
                <input type='password' class='form-control' id='password'>
            </div>
        </div>
    </div>
</body>
</html>
Previous
Next