Auto-focus "Yes" button now handled in Blazor (#1261)

Moved auto-focus logic from JS to Blazor using ElementReference and FocusAsync. Updated ConfirmDialog to use @ref and OnAfterRenderAsync for focusing. Removed autoFocusYesButton handling from JS.

Author: gvreddy04

blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor

@@ -41,7 +41,7 @@
                         }
                         @if (!string.IsNullOrWhiteSpace(yesButtonText))
                         {
-                            <button id="bb-confirm-@Id" class="@yesButtonColor px-4" type="button" @onclick="OnYesClick">@yesButtonText</button>
+                            <button @ref="@yesButtonElement" class="@yesButtonColor px-4" type="button" @onclick="OnYesClick">@yesButtonText</button>
                         }
                     </div>
                 </div>

blazorbootstrap/Components/ConfirmDialog/ConfirmDialog.razor.cs

@@ -5,11 +5,9 @@ public partial class ConfirmDialog : BlazorBootstrapComponentBase
     #region Fields and Constants
 
     private Type? childComponent;
-
     private string? dialogCssClass;
     private bool dismissable;
     private string? headerCssClass;
-
     private bool isVisible;
     private string? message1;
     private string? message2;
@@ -18,20 +16,27 @@ public partial class ConfirmDialog : BlazorBootstrapComponentBase
     private string? noButtonText;
     private Dictionary<string, object>? parameters;
     private string? scrollable;
-
+    private bool shouldAutoFocusYesButton;
     private bool showBackdrop;
-
     private TaskCompletionSource<bool>? taskCompletionSource;
-
     private string? title;
     private string? verticallyCentered;
+    private ElementReference yesButtonElement;
     private string? yesButtonColor;
     private string? yesButtonText;
 
     #endregion
 
     #region Methods
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if(isVisible && shouldAutoFocusYesButton)
+            await yesButtonElement.FocusAsync();
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     /// <summary>
     /// Shows confirm dialog.
     /// </summary>
@@ -116,13 +121,13 @@ private Task<bool> Show(string title, string? message1, string? message2, Type?
         modalSize = confirmDialogOptions.Size.ToDialogSizeClass();
         yesButtonColor = $"{BootstrapClass.Button} {confirmDialogOptions.YesButtonColor.ToButtonColorClass()}";
         yesButtonText = confirmDialogOptions.YesButtonText;
-
+        shouldAutoFocusYesButton = confirmDialogOptions.AutoFocusYesButton;
         isVisible = true;
         showBackdrop = true;
 
         StateHasChanged();
 
-        Task.Run(async () => await SafeInvokeVoidAsync("window.blazorBootstrap.confirmDialog.show", Id, confirmDialogOptions.AutoFocusYesButton));
+        Task.Run(async () => await SafeInvokeVoidAsync("window.blazorBootstrap.confirmDialog.show", Id));
 
         return task;
     }

blazorbootstrap/wwwroot/blazor.bootstrap.js

@@ -223,21 +223,14 @@ window.blazorBootstrap = {
         }
     },
     confirmDialog: {
-        show: (elementId, autoFocusYesButton) => {
+        show: (elementId) => {
             let confirmDialogEl = document.getElementById(elementId);
             if (confirmDialogEl != null)
                 setTimeout(() => confirmDialogEl.classList.add('show'), 90); // added delay for server
 
             let bodyEl = document.getElementsByTagName('body');
             if (bodyEl.length > 0)
                 bodyEl[0].style['overflow'] = 'hidden';
-
-            if (!autoFocusYesButton)
-                return;
-
-            let yesButtonEl = document.getElementById(`bb-confirm-${elementId}`);
-            if (yesButtonEl)
-                yesButtonEl.focus();
         },
         hide: (elementId) => {
             let confirmDialogEl = document.getElementById(elementId);