Disable auto focus on the yes button (#648)

* Disable auto focus on the yes button - docs and demos update.

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor

@@ -57,6 +57,15 @@
 <div class="mb-3"></div>
 <Demo Type="typeof(ConfirmDialog_Demo_07_Vertically_Centered_02)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Disable auto focus on the yes button" PageUrl="@pageUrl" HashTagName="Disable-auto-focus-on-the-yes-button" />
+<Callout Type="CalloutType.Info" HideHeading="true">
+    By default, auto focus on the <b>"Yes"</b> button is enabled.
+</Callout>
+<div class="my-3">
+    To disabe the autofocus, set <Badge Color="BadgeColor.Light">AutoFocusYesButton = false</Badge> on the <b>ConfirmDialogOptions</b>.
+</div>
+<Demo Type="typeof(ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button)" Tabs="true" />
+
 @code {
     private string pageUrl = "/confirm-dialog";
     private string title = "Blazor Confirm Dialog Component";

BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor

@@ -21,4 +21,4 @@
             // do something
         }
     }
-}
+}

BlazorBootstrap.Demo.RCL/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor

@@ -0,0 +1,24 @@
+<ConfirmDialog @ref="dialog" />
+
+<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>
+
+@code {
+    private ConfirmDialog dialog = default!;
+
+    private async Task ShowDialogAsync()
+    {
+        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(
+            title: "Confirm dialog title",
+            confirmDialogOptions: new ConfirmDialogOptions { AutoFocusYesButton = false }
+        );
+
+        if (confirmation)
+        {
+            // do something
+        }
+        else
+        {
+            // do something
+        }
+    }
+}

BlazorBootstrap.Demo.RCL/Pages/Index.razor

@@ -87,7 +87,7 @@
         </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/confirm-dialog">
-                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog</h4>
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog<Badge Color="BadgeColor.Success">Updated</Badge></h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">

blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs

@@ -138,7 +138,7 @@ private Task<bool> 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;
     }

blazorbootstrap/Models/ConfirmDialogOptions.cs

@@ -4,6 +4,11 @@ public class ConfirmDialogOptions
 {
     #region Properties, Indexers
 
+    /// <summary>
+    /// Determines whether to focus on the yes button or not.
+    /// </summary>
+    public bool AutoFocusYesButton {  get; set; } = true;
+
     /// <summary>
     /// Additional CSS class for the dialog (div.modal-dialog element).
     /// </summary>

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();

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)
+[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
+<ConfirmDialog @ref="dialog" />
+
+<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>
+```
+
+```cshtml {} showLineNumbers
+@code {
+    private ConfirmDialog dialog = default!;
+
+    private async Task ShowDialogAsync()
+    {
+        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(
+            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)