Add auto-focus to the default action in overlay dialogs

umbraco · Jun 27, 2019 · 040ebfe · 040ebfe
1 parent 8c5f253
commit 040ebfe
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -95,7 +95,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
                 size: "@?",
                 alias: "@?",
                 addEllipsis: "@?",
-                showCaret: "@?"
+                showCaret: "@?",
+                autoFocus: "@?"
             }
         });
 

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbautofocus.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbautofocus.directive.js
@@ -9,8 +9,10 @@ angular.module("umbraco.directives")
                 }
             };
 
-            $timeout(function() {
-                update();
-            });
+            if (attr.umbAutoFocus !== "false") {
+                $timeout(function() {
+                    update();
+                });
+            }
     };
 });
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
@@ -311,9 +311,8 @@ Opens an overlay to show a custom YSOD. </br>
                      var submitOnEnter = document.activeElement.hasAttribute("overlay-submit-on-enter");
                      var submitOnEnterValue = submitOnEnter ? document.activeElement.getAttribute("overlay-submit-on-enter") : "";
 
-                     if(clickableElements.indexOf(activeElementType) === 0) {
-                        document.activeElement.trigger("click");
-                        event.preventDefault();
+                     if(clickableElements.indexOf(activeElementType) >= 0) {
+                         // don't do anything, let the browser Enter key handle this
                      } else if(activeElementType === "TEXTAREA" && !submitOnEnter) {
 
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -15,15 +15,15 @@
         </span>
     </a>
 
-    <button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled">
+    <button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
             <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
             {{vm.buttonLabel}}
             <span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
         </span>
     </button>
 
-    <button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled">
+    <button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
             <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
             {{vm.buttonLabel}}

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -50,7 +50,8 @@ <h5 class="red" ng-if="model.confirmSubmit.title"><i class="icon-alert"></i> {{
                         label="Confirm"
                         type="button"
                         disabled="!directive.enableConfirmButton"
-                        action="submitForm(model)">
+                        action="submitForm(model)"
+                        auto-focus="true">
                     </umb-button>
                 </div>
             </div>
@@ -74,7 +75,8 @@ <h5 class="red" ng-if="model.confirmSubmit.title"><i class="icon-alert"></i> {{
                     type="button"
                     disabled="model.disableSubmitButton"
                     action="submitForm(model)"
-                    state="model.submitButtonState">
+                    state="model.submitButtonState"
+                    auto-focus="true">
                 </umb-button>
             </div>