diff --git a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor
index e8f69182f..f5b6ec523 100644
--- a/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor
@@ -57,6 +57,15 @@
+
+
+ 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 @@
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();
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)