starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

SideDialogOptions AutoFocusFirstElement added

Browse Source
This commit is contained in:
Vladimir Enchev
2024-08-08 11:49:53 +03:00
parent 56aaa082da
commit f99fc6f15f
3 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Radzen.Blazor/DialogService.cs
View File

@@ -512,6 +512,11 @@ namespace Radzen
/// Whether to show a mask on the background or not
/// </summary>
public bool ShowMask { get; set; } = true;
/// <summary>
/// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
/// </summary>
public bool AutoFocusFirstElement { get; set; } = false;
}
/// <summary>

10
Radzen.Blazor/RadzenDialog.razor
View File

@@ -145,4 +145,14 @@
return $"{widthStyle}{heightStyle}{sideDialogOptions.Style}";
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (isSideDialogOpen)
{
await JSRuntime.InvokeAsync<string>("Radzen.openSideDialog", sideDialogOptions);
}
}
}

52
Radzen.Blazor/wwwroot/Radzen.Blazor.js
View File

@@ -1343,6 +1343,37 @@ window.Radzen = {
}
}
},
focusFirstFocusableElement: function (el) {
var focusable = Radzen.getFocusableElements(el);
var editor = el.querySelector('.rz-html-editor');
if (editor && !focusable.includes(editor.previousElementSibling)) {
var editable = el.querySelector('.rz-html-editor-content');
if (editable) {
var selection = window.getSelection();
var range = document.createRange();
range.setStart(editable, 0);
range.setEnd(editable, 0);
selection.removeAllRanges();
selection.addRange(range);
}
} else {
var firstFocusable = focusable[0];
if (firstFocusable) {
firstFocusable.focus();
}
}
},
openSideDialog: function (options) {
setTimeout(function () {
if (options.autoFocusFirstElement) {
var dialogs = document.querySelectorAll('.rz-dialog-side-content');
if (dialogs.length == 0) return;
var lastDialog = dialogs[dialogs.length - 1];
Radzen.focusFirstFocusableElement(lastDialog);
}
}, 500);
},
openDialog: function (options, dialogService, dialog) {
if (Radzen.closeAllPopups) {
Radzen.closeAllPopups();
@@ -1416,26 +1447,7 @@ window.Radzen = {
}
if (options.autoFocusFirstElement) {
var focusable = Radzen.getFocusableElements(lastDialog);
var editor = lastDialog.querySelector('.rz-html-editor');
if (editor && !focusable.includes(editor.previousElementSibling)) {
var editable = lastDialog.querySelector('.rz-html-editor-content');
if (editable) {
var selection = window.getSelection();
var range = document.createRange();
range.setStart(editable, 0);
range.setEnd(editable, 0);
selection.removeAllRanges();
selection.addRange(range);
}
} else {
var focusable = Radzen.getFocusableElements(lastDialog);
var firstFocusable = focusable[0];
if (firstFocusable) {
firstFocusable.focus();
}
}
Radzen.focusFirstFocusableElement(lastDialog);
}
}
}, 500);