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

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}}

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}}
-    {{#if @extra.inputIcon}}
+    {{svg-jar @extra.inputIcon class=@extra.inputIconClass}}
-        {{svg-jar @extra.inputIcon class=@extra.inputIconClass}}
+{{/if}}
-    {{/if}}
+<input
-    <input
+    {{did-insert this.registerInput}}
-        {{did-insert this.registerInput}}
+    {{did-update this.closeWhenEmpty @select.results}}
-        {{did-update this.closeWhenEmpty @select.results}}
+    {{on "input" this.handleInput}}
-        {{on "mousedown" this.captureMousedown}}
+    {{on "keydown" this.handleKeydown}}
-        {{on "input" this.handleInput}}
+    {{on "keyup" this.handleKeyup}}
-        {{on "keydown" this.handleKeydown}}
+    {{on "focus" this.handleFocus}}
-        {{on "keyup" this.handleKeyup}}
+    {{on "blur" this.handleBlur}}
-        {{on "focus" this.handleFocus}}
+    class="gh-input-with-select-input"
-        {{on "blur" this.handleBlur}}
+    type={{or @extra.inputType "text"}}
-        class="gh-input-with-select-input"
+    autofocus={{@extra.autofocus}}
-        type={{or @extra.inputType "text"}}
+    autocomplete="off"
-        autofocus={{@extra.autofocus}}
+    autocorrect="off"
-        autocomplete="off"
+    autocapitalize="off"
-        autocorrect="off"
+    value={{@extra.value}}
-        autocapitalize="off"
+    name="selectSearchTerm" {{!-- contains "search" to prevent Safari showing autocomplete --}}
-        value={{@extra.value}}
+    spellcheck="false"
-        name="selectSearchTerm" {{!-- contains "search" to prevent Safari showing autocomplete --}}
+    role="combobox"
-        spellcheck="false"
+    placeholder={{@placeholder}}
-        role="combobox"
+    disabled={{@select.disabled}}
-        placeholder={{@placeholder}}
+>
-        disabled={{@select.disabled}}
-    >
-</div>

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

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;
-}
+}