@inject IJSRuntime js

<div id="container">
    <TelerikButton OnClick="@ShowWindow">Show Window</TelerikButton>

    <p>some focusable elements here:</p>
    <div contenteditable="true" tabindex="1">custom focusable element</div>
    <p><input /></p>
    <p><a href="#">link</a></p>
</div>

<TelerikWindow Visible="@WindowVisible"
               VisibleChanged="@WindowVisibleChanged"
               Centered="true"
               Modal="true">
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle>
        Window title
    </WindowTitle>
    <WindowContent>
        <p>Focus outside the Window is now disabled.</p>
        <p>If you want to experiment while the Window is open:</p>
        <TelerikButton OnClick="@PreventFocus">Prevent Focus</TelerikButton>
        <TelerikButton OnClick="@RestoreFocus">Restore Focus</TelerikButton>
    </WindowContent>
</TelerikWindow>

@* Move this script to a proper location in a production app *@
<script suppress-error="BL9992">function preventFocus(containerSelector) {
    processTabindex(containerSelector, "tabindex", "back_tabindex");
}
function restoreFocus(containerSelector) {
    processTabindex(containerSelector, "back_tabindex", "tabindex");
}
function processTabindex(containerSelector, attr, backAttr) {
    // workaround for a specific container
    //var container = document.querySelector(containerSelector);
    //var elements = container.querySelectorAll("input, textarea, a, button, [tabindex]");

    // OR
    // workaround for all elements outside a Window
    var elements = document.querySelectorAll(":not(.k-window) input, :not(.k-window) textarea, :not(.k-window) a, :not(.k-window) button, :not(.k-window) [tabindex]");
    
    elements.forEach(el => {

        if (attr == "back_tabindex") {
            // restoring saved tabindex, we remove tabindex -1
            el.removeAttribute("tabindex");
        }

        var tabindex = el.getAttribute(attr);

        if (tabindex != null) {
            el.setAttribute(backAttr, tabindex);
        }

        if (attr == "tabindex") {
            // preventing focus, we set tabindex -1 to everything
            el.setAttribute(attr, "-1");
        } else {
            // restoring saved tabindex, we remove the temporary attribute
            el.removeAttribute(attr);
        }
    });
}</script>

@code {
    bool WindowVisible { get; set; }

    async Task ShowWindow()
    {
        WindowVisible = true;
        await PreventFocus();
    }

    async Task WindowVisibleChanged(bool newVisible)
    {
        WindowVisible = newVisible;

        if (WindowVisible)
        {
            await PreventFocus();
        }
        else
        {
            await RestoreFocus();
        }
    }

    async Task PreventFocus()
    {
        await js.InvokeVoidAsync("preventFocus", "#container");
    }

    async Task RestoreFocus()
    {
        await js.InvokeVoidAsync("restoreFocus", "#container");
    }
}