From 23c6547b5bd68602cbb524fd4316705fc9c8e915 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 26 Aug 2021 17:19:00 +0100
Subject: [PATCH] Fixed missing outline on `<GhInputWithSelect>` when focused

refs https://github.com/TryGhost/Team/issues/993

- added calls to `onFocus()` and `onBlur()` arguments inside the trigger when the input is focused/blurred so that the active class is correctly applied by ember-power-select
- removed unnecessary mousedown propagation cancellation, it was a copied from `<GhTokenInput>` where extra mouse handling is necessary for buttons inside tokens
- updated `.gh-input-with-select` styles to add the border when active
---
 .../components/gh-input-with-select/index.hbs |  2 +-
 .../gh-input-with-select/trigger.hbs          | 51 +++++++++----------
 .../gh-input-with-select/trigger.js           |  9 ++--
 .../app/styles/components/power-select.css    |  7 ++-
 4 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/ghost/admin/app/components/gh-input-with-select/index.hbs b/ghost/admin/app/components/gh-input-with-select/index.hbs
index 0b67143a8b..8359fc3ffb 100644
--- a/ghost/admin/app/components/gh-input-with-select/index.hbs
+++ b/ghost/admin/app/components/gh-input-with-select/index.hbs
@@ -54,7 +54,7 @@
         @selected={{@selected}}
         @selectedItemComponent={{@selectedItemComponent}}
         @tabindex="-1"
-        @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}"
+        @triggerClass="ember-power-select-multiple-trigger gh-input-with-select-trigger {{@triggerClass}}"
         @triggerComponent={{component (or @triggerComponent "gh-input-with-select/trigger") tabindex=@tabindex}}
         @triggerId={{@triggerId}}
         @triggerRole={{@triggerRole}}
diff --git a/ghost/admin/app/components/gh-input-with-select/trigger.hbs b/ghost/admin/app/components/gh-input-with-select/trigger.hbs
index a8e3ce2e80..fde8ed9244 100644
--- a/ghost/admin/app/components/gh-input-with-select/trigger.hbs
+++ b/ghost/admin/app/components/gh-input-with-select/trigger.hbs
@@ -1,27 +1,24 @@
-<div {{on "mousedown" this.captureMousedown}} id="gh-input-with-select-trigger-{{@select.uniqueId}}">
-    {{#if @extra.inputIcon}}
-        {{svg-jar @extra.inputIcon class=@extra.inputIconClass}}
-    {{/if}}
-    <input
-        {{did-insert this.registerInput}}
-        {{did-update this.closeWhenEmpty @select.results}}
-        {{on "mousedown" this.captureMousedown}}
-        {{on "input" this.handleInput}}
-        {{on "keydown" this.handleKeydown}}
-        {{on "keyup" this.handleKeyup}}
-        {{on "focus" this.handleFocus}}
-        {{on "blur" this.handleBlur}}
-        class="gh-input-with-select-input"
-        type={{or @extra.inputType "text"}}
-        autofocus={{@extra.autofocus}}
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        value={{@extra.value}}
-        name="selectSearchTerm" {{!-- contains "search" to prevent Safari showing autocomplete --}}
-        spellcheck="false"
-        role="combobox"
-        placeholder={{@placeholder}}
-        disabled={{@select.disabled}}
-    >
-</div>
+{{#if @extra.inputIcon}}
+    {{svg-jar @extra.inputIcon class=@extra.inputIconClass}}
+{{/if}}
+<input
+    {{did-insert this.registerInput}}
+    {{did-update this.closeWhenEmpty @select.results}}
+    {{on "input" this.handleInput}}
+    {{on "keydown" this.handleKeydown}}
+    {{on "keyup" this.handleKeyup}}
+    {{on "focus" this.handleFocus}}
+    {{on "blur" this.handleBlur}}
+    class="gh-input-with-select-input"
+    type={{or @extra.inputType "text"}}
+    autofocus={{@extra.autofocus}}
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    value={{@extra.value}}
+    name="selectSearchTerm" {{!-- contains "search" to prevent Safari showing autocomplete --}}
+    spellcheck="false"
+    role="combobox"
+    placeholder={{@placeholder}}
+    disabled={{@select.disabled}}
+>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-input-with-select/trigger.js b/ghost/admin/app/components/gh-input-with-select/trigger.js
index b208136409..26e4b95de8 100644
--- a/ghost/admin/app/components/gh-input-with-select/trigger.js
+++ b/ghost/admin/app/components/gh-input-with-select/trigger.js
@@ -15,11 +15,6 @@ export default class GhSearchInputTrigger extends Component {
         }
     }
 
-    @action
-    captureMousedown(e) {
-        e.stopPropagation();
-    }
-
     @action
     handleInput(event) {
         let term = event.target.value;
@@ -55,6 +50,8 @@ export default class GhSearchInputTrigger extends Component {
         if (this.args.extra?.openOnFocus && this.args.select.results.length > 0) {
             this.open();
         }
+
+        this.args.onFocus?.(...arguments);
     }
 
     @action
@@ -73,6 +70,8 @@ export default class GhSearchInputTrigger extends Component {
             this.args.select.actions.search('');
             this.close();
         }
+
+        this.args.onBlur?.(...arguments);
     }
 
     @action
diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index 3125c8409b..16a6f25388 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -341,6 +341,11 @@
 }
 
 /* Input with power select */
+.gh-input-with-select-trigger.ember-power-select-trigger--active {
+    border-color: color-mod(var(--green)) !important;
+    box-shadow: inset 0 0 0 1px var(--green);
+}
+
 .gh-input-with-select-input {
     border: none;
     width: 100%;
@@ -360,4 +365,4 @@
 
 .gh-snippet-dropdown li {
     padding: 8px 12px;
-}
\ No newline at end of file
+}