From e551488e559b86be014272d18a5c3e69e554a230 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 15 Mar 2019 14:38:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20difficult=20to=20cancel?=
 =?UTF-8?q?=20webhook=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Ghost/issues/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 |  5 ++++-
 app/templates/components/modal-new-integration.hbs | 13 +++++++++++--
 app/templates/components/modal-new-subscriber.hbs  | 12 ++++++++++--
 app/templates/components/modal-webhook-form.hbs    | 12 ++++++++++--
 ember-cli-build.js                                 |  2 +-
 5 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app/templates/components/modal-invite-new-user.hbs b/app/templates/components/modal-invite-new-user.hbs
index d8b1a13c23..8ccc187eb8 100644
--- a/app/templates/components/modal-invite-new-user.hbs
+++ b/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>
diff --git a/app/templates/components/modal-new-integration.hbs b/app/templates/components/modal-new-integration.hbs
index 7400c847af..7045dd9617 100644
--- a/app/templates/components/modal-new-integration.hbs
+++ b/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"
diff --git a/app/templates/components/modal-new-subscriber.hbs b/app/templates/components/modal-new-subscriber.hbs
index a56393115f..83b1518a04 100644
--- a/app/templates/components/modal-new-subscriber.hbs
+++ b/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"
diff --git a/app/templates/components/modal-webhook-form.hbs b/app/templates/components/modal-webhook-form.hbs
index 7f22525d3f..9c71602475 100644
--- a/app/templates/components/modal-webhook-form.hbs
+++ b/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
diff --git a/ember-cli-build.js b/ember-cli-build.js
index d6d05e6304..95a98e0947 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -118,7 +118,7 @@ module.exports = function (defaults) {
             includePolyfill: false
         },
         'ember-composable-helpers': {
-            only: ['toggle']
+            only: ['optional', 'toggle']
         },
         outputPaths: {
             app: {