Prevent the focus to the Previous element

29 Aug 20252 minutes to read

By default, when the dialog is closed, focus returns to the element that was previously focused before the dialog opened. You can prevent this behavior using the beforeClose event and setting the preventFocus argument to true.

Bind the beforeClose event and enable the preventFocus argument as shown in the sample below.

CSHTML

<div id="container" style="height:400px;">
    @Html.EJS().Button("openBtn").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).Target("#container").Width("300px").Height("auto").AnimationSettings(new { effect = "Zoom" }).BeforeClose("onBeforeClose").Buttons(btn => {
        btn.Click("btnClick").ButtonModel(new { isPrimary = true, content = "Yes" }).Add();
        btn.Click("btnClick").ButtonModel(new { content = "No" }).Add();
    }).Render()
</div>
<script>
        document.getElementById('openBtn').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
        function btnClick() {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.hide();
        }
        function onBeforeClose(args) {
            args.preventFocus = true;
        }
    </script>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }

    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, content = "Ok" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel" };
        return View();
    }

}