🐛 Fixed difficult to cancel webhook modal

closes TryGhost/Ghost#10135
- `focusOut` events are fired before the `click` event is fired when clicking buttons whilst an input has focus, this has the effect of triggering our on-blur validations that can cause UI to jump which then results in the `mouseUp` being outside of the button which means no `click` event is fired
- stops `mouseDown` event from bubbling from modal cancel/close buttons so that `focusOut` validations aren't triggered

app/templates/components/modal-invite-new-user.hbs

@@ -1,7 +1,10 @@
 <header class="modal-header">
     <h1>Invite a New User</h1>
 </header>
-<a class="close" href="" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+<a class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
+    {{svg-jar "close"}}<span class="hidden">Close</span>
+</a>
 
 <div class="modal-body">
     <fieldset>

app/templates/components/modal-new-integration.hbs

@@ -1,7 +1,10 @@
 <header class="modal-header" data-test-modal="new-integration">
     <h1>New custom integration</h1>
 </header>
-<button class="close" href="" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}</button>
+{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+<button class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
+    {{svg-jar "close"}}
+</button>
 
 <div class="modal-body">
     <fieldset>
@@ -24,7 +27,13 @@
 </div>
 
 <div class="modal-footer">
-    <button {{action "closeModal"}} class="gh-btn" data-test-button="cancel-new-integration">
+    <button
+        class="gh-btn"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+        {{action (optional noop) on="mouseDown"}}
+        data-test-button="cancel-new-integration"
+    >
         <span>Cancel</span>
     </button>
     {{gh-task-button "Create"

app/templates/components/modal-new-subscriber.hbs

@@ -1,7 +1,10 @@
 <header class="modal-header" data-test-modal="new-subscriber">
     <h1>Add a Subscriber</h1>
 </header>
-<a class="close" href="" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+<a class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
+    {{svg-jar "close"}}<span class="hidden">Close</span>
+</a>
 
 <div class="modal-body">
     <fieldset>
@@ -25,7 +28,12 @@
 </div>
 
 <div class="modal-footer">
-    <button {{action "closeModal"}} class="gh-btn" data-test-button="cancel-new-subscriber">
+    <button class="gh-btn"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+        {{action (optional noop) on="mouseDown"}}
+        data-test-button="cancel-new-subscriber"
+    >
         <span>Cancel</span>
     </button>
     {{gh-task-button "Add"

app/templates/components/modal-webhook-form.hbs

@@ -1,7 +1,9 @@
 <header class="modal-header" data-test-modal="webhook-form">
     <h1 data-test-text="title">{{if webhook.isNew "New" "Edit"}} webhook</h1>
 </header>
-<button class="close" href="" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}</button>
+<button class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
+    {{svg-jar "close"}}
+</button>
 
 <div class="modal-body">
     <fieldset>
@@ -88,7 +90,13 @@
 </div>
 
 <div class="modal-footer">
-    <button {{action "closeModal"}} class="gh-btn" data-test-button="cancel-webhook">
+    <button
+        class="gh-btn"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+        {{action (optional noop) on="mouseDown"}}
+        data-test-button="cancel-webhook"
+    >
         <span>Cancel</span>
     </button>
     {{gh-task-button buttonText

ember-cli-build.js

@@ -118,7 +118,7 @@ module.exports = function (defaults) {
             includePolyfill: false
         },
         'ember-composable-helpers': {
-            only: ['toggle']
+            only: ['optional', 'toggle']
         },
         outputPaths: {
             app: {