From 4af00ac7c2b39bfa247748dd12caddfa2592cc96 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 11 Apr 2024 12:50:32 +0530 Subject: [PATCH 1/2] Disable auto focus on the yes button --- .../ConfirmDialogDocumentation.razor | 7 ++++++ .../ConfirmDialog_Demo_01_Examples.razor | 2 +- ...Demo_08_Disable_AutoFocus_Yes_Button.razor | 24 +++++++++++++++++++ BlazorBootstrap.Demo.RCL/Pages/Index.razor | 2 +- .../ConfirmDialog/ConfirmDialog.razor.cs | 2 +- .../Models/ConfirmDialogOptions.cs | 5 ++++ blazorbootstrap/wwwroot/blazor.bootstrap.js | 5 +++- 7 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor diff --git a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index e8f69182f..0b67b19c9 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -57,6 +57,13 @@
+ + + By default, auto focus on the "Yes" button is enabled. + To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions. + + + @code { private string pageUrl = "/confirm-dialog"; private string title = "Blazor Confirm Dialog Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor index ab4e570fc..1ae92a16b 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor @@ -21,4 +21,4 @@ // do something } } -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor new file mode 100644 index 000000000..f481f0ba5 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor @@ -0,0 +1,24 @@ + + + + +@code { + private ConfirmDialog dialog = default!; + + private async Task ShowDialogAsync() + { + var confirmation = await dialog.ShowAsync( + title: "Confirm dialog title", + confirmDialogOptions: new ConfirmDialogOptions { AutoFocusYesButton = false } + ); + + if (confirmation) + { + // do something + } + else + { + // do something + } + } +} diff --git a/BlazorBootstrap.Demo.RCL/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Pages/Index.razor index 286601cb2..317b19b47 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Index.razor @@ -87,7 +87,7 @@
-

Confirm Dialog

+

Confirm DialogUpdated
diff --git a/blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs b/blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs index 1f88ff73c..51c77bac3 100644 --- a/blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs +++ b/blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs @@ -138,7 +138,7 @@ private Task Show(string title, string? message1, string? message2, Type? StateHasChanged(); - QueueAfterRenderAction(async () => { await JS.InvokeVoidAsync("window.blazorBootstrap.confirmDialog.show", ElementId); }, new RenderPriority()); + QueueAfterRenderAction(async () => { await JS.InvokeVoidAsync("window.blazorBootstrap.confirmDialog.show", ElementId, confirmDialogOptions.AutoFocusYesButton); }, new RenderPriority()); return task; } diff --git a/blazorbootstrap/Models/ConfirmDialogOptions.cs b/blazorbootstrap/Models/ConfirmDialogOptions.cs index 79685f01a..d018e0237 100644 --- a/blazorbootstrap/Models/ConfirmDialogOptions.cs +++ b/blazorbootstrap/Models/ConfirmDialogOptions.cs @@ -4,6 +4,11 @@ public class ConfirmDialogOptions { #region Properties, Indexers + /// + /// Determines whether to focus on the yes button or not. + /// + public bool AutoFocusYesButton { get; set; } = true; + /// /// Additional CSS class for the dialog (div.modal-dialog element). /// diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 97f39cd41..72b087e24 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -211,7 +211,7 @@ window.blazorBootstrap = { } }, confirmDialog: { - show: (elementId) => { + show: (elementId, autoFocusYesButton) => { let confirmDialogEl = document.getElementById(elementId); if (confirmDialogEl != null) setTimeout(() => confirmDialogEl.classList.add('show'), 90); // added delay for server @@ -220,6 +220,9 @@ window.blazorBootstrap = { if (bodyEl.length > 0) bodyEl[0].style['overflow'] = 'hidden'; + if (!autoFocusYesButton) + return; + let yesButtonEl = document.getElementById(`bb-confirm-${elementId}`); if (yesButtonEl) yesButtonEl.focus(); From 1722f93f6a51369d705169c5f9632e5baf54bc07 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 11 Apr 2024 14:00:36 +0530 Subject: [PATCH 2/2] Confirm Dialog - docs and demos update. --- .../ConfirmDialogDocumentation.razor | 4 +- docs/docs/05-components/confirm-dialog.mdx | 42 ++++++++++++++++++- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index 0b67b19c9..f5b6ec523 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -60,8 +60,10 @@ By default, auto focus on the "Yes" button is enabled. - To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions. +
+ To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions. +
@code { diff --git a/docs/docs/05-components/confirm-dialog.mdx b/docs/docs/05-components/confirm-dialog.mdx index 13a1c8241..0dbbfdc2c 100644 --- a/docs/docs/05-components/confirm-dialog.mdx +++ b/docs/docs/05-components/confirm-dialog.mdx @@ -379,4 +379,44 @@ You can also create a scrollable dialog that allows scroll the dialog body by up } ``` -[See Confirm Dialog demo here.](https://demos.blazorbootstrap.com/confirm-dialog#vertically-centered) \ No newline at end of file +[See demo here.](https://demos.blazorbootstrap.com/confirm-dialog#vertically-centered) + +### Disable auto focus on the yes button + +:::info +By default, auto focus on the **"Yes"** button is enabled. +::: + +To disabe the autofocus, set `AutoFocusYesButton = false` on the ConfirmDialogOptions. + + +```cshtml {} showLineNumbers + + + +``` + +```cshtml {} showLineNumbers +@code { + private ConfirmDialog dialog = default!; + + private async Task ShowDialogAsync() + { + var confirmation = await dialog.ShowAsync( + title: "Confirm dialog title", + confirmDialogOptions: new ConfirmDialogOptions { AutoFocusYesButton = false } + ); + + if (confirmation) + { + // do something + } + else + { + // do something + } + } +} +``` + +[See demo here.](https://demos.blazorbootstrap.com/confirm-dialog#disable-auto-focus-on-the-yes-button)