Hi Alexander and everyone,
Yes, we aim to include this behavior in the next release 4.1. in early March.
Regards,
Dimo
Progress Telerik
Hello all,
While we implement this feature, consider the following workaround. It uses JavaScript to prevent focus behind the modal Window. It can rely on a specific parent container or work with all elements outside a Window.
@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");
}
}
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.