fix auto focus in animated dialogs

fgilde · Nov 23, 2024 · 15aa30b · 15aa30b
1 parent b4cb56f
commit 15aa30b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 4 deletions.
diff --git a/MudBlazor.Extensions/wwwroot/MudBlazor.Extensions.lib.module.js b/MudBlazor.Extensions/wwwroot/MudBlazor.Extensions.lib.module.js
diff --git a/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.all.js b/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.all.js
@@ -1992,7 +1992,10 @@ class MudExDialogHandler extends MudExDialogHandlerBase {
             dialog.__extended = true;
             dialog.setAttribute('data-mud-extended', true);
             dialog.classList.add('mud-ex-dialog');
-            this.handleAll(dialog);            
+            this.handleAll(dialog);           
+            this.awaitAnimation(() => {
+                window.MudBlazorExtensions.focusAllAutoFocusElements();
+            });
             if (this.onDone) this.onDone();
         }, 50);
     }
@@ -2467,9 +2470,24 @@ window.MudBlazorExtensions = {
                 MudExDialogNoModalHandler.bringToFront(dialog, true);
             }
         }
+    },
+
+    focusAllAutoFocusElements: function () {
+        const elements = document.querySelectorAll('[data-auto-focus="true"]');
+        elements.forEach(element => {
+            element.removeAttribute('data-auto-focus');
+            window.MudBlazorExtensions._originalFocusMethod(element);
+        });
     }
 
 
 };
 
 window.MudBlazorExtensions.__bindEvents();
+
+// override focus method 
+window.MudBlazorExtensions._originalFocusMethod = window.Blazor._internal.domWrapper.focus;
+Blazor._internal.domWrapper.focus = function (element, preventScroll) {
+    element.setAttribute('data-auto-focus', 'true');
+    window.MudBlazorExtensions._originalFocusMethod(element, preventScroll);
+}
diff --git a/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.all.min.js b/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.all.min.js
diff --git a/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.js b/MudBlazor.Extensions/wwwroot/js/mudBlazorExtensions.js
@@ -127,9 +127,24 @@ window.MudBlazorExtensions = {
                 MudExDialogNoModalHandler.bringToFront(dialog, true);
             }
         }
+    },
+
+    focusAllAutoFocusElements: function () {
+        const elements = document.querySelectorAll('[data-auto-focus="true"]');
+        elements.forEach(element => {
+            element.removeAttribute('data-auto-focus');
+            window.MudBlazorExtensions._originalFocusMethod(element);
+        });
     }
 
 
 };
 
 window.MudBlazorExtensions.__bindEvents();
+
+// override focus method 
+window.MudBlazorExtensions._originalFocusMethod = window.Blazor._internal.domWrapper.focus;
+Blazor._internal.domWrapper.focus = function (element, preventScroll) {
+    element.setAttribute('data-auto-focus', 'true');
+    window.MudBlazorExtensions._originalFocusMethod(element, preventScroll);
+}
diff --git a/MudBlazor.Extensions/wwwroot/js/utils/dialogExt/dialogHandler.js b/MudBlazor.Extensions/wwwroot/js/utils/dialogExt/dialogHandler.js
@@ -8,7 +8,10 @@
             dialog.__extended = true;
             dialog.setAttribute('data-mud-extended', true);
             dialog.classList.add('mud-ex-dialog');
-            this.handleAll(dialog);            
+            this.handleAll(dialog);           
+            this.awaitAnimation(() => {
+                window.MudBlazorExtensions.focusAllAutoFocusElements();
+            });
             if (this.onDone) this.onDone();
         }, 50);
     }