From 040ebfe9dd7d7053ccf4393f8a83c11fc3866b69 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Tue, 14 May 2019 21:51:53 +0200
Subject: [PATCH] Add auto-focus to the default action in overlay dialogs

---
 .../directives/components/buttons/umbbutton.directive.js  | 3 ++-
 .../directives/components/forms/umbautofocus.directive.js | 8 +++++---
 .../components/overlays/umboverlay.directive.js           | 5 ++---
 .../src/views/components/buttons/umb-button.html          | 4 ++--
 .../src/views/components/overlays/umb-overlay.html        | 6 ++++--
 5 files changed, 15 insertions(+), 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
index 83904bd0369d..f026a05c45ed 100644
--- 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
index 6fcdd99001ec..eb3503f799b3 100644
--- 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
index 8c32d93c01d7..0135abd97c57 100644
--- 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
index dcad858781db..8163b2807be0 100644
--- 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,7 +15,7 @@
         </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}}
@@ -23,7 +23,7 @@
         </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
index f44a73ff2a7e..ae3cfcc776fd 100644
--- 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>