From ed859016073804b0020506cc349611e464c37e1e Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 25 Aug 2021 15:41:17 +0100
Subject: [PATCH] Fixed tabbing in and out of `<GhInputWithSelect>`

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

- setting `tabIndex="-1"` on the trigger prevents the trigger container receiving focus rather than the container input element (fixes general tabbing in and out)
- added extra blur handling to the input element so that it is not left in an open dropdown state when tabbing out
---
 .../app/components/gh-input-with-select/index.hbs    |  2 +-
 .../app/components/gh-input-with-select/trigger.js   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 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 eb64f3cf19..0b67143a8b 100644
--- a/ghost/admin/app/components/gh-input-with-select/index.hbs
+++ b/ghost/admin/app/components/gh-input-with-select/index.hbs
@@ -53,7 +53,7 @@
         @searchPlaceholder={{@searchPlaceholder}}
         @selected={{@selected}}
         @selectedItemComponent={{@selectedItemComponent}}
-        @tabindex={{@tabindex}}
+        @tabindex="-1"
         @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}"
         @triggerComponent={{component (or @triggerComponent "gh-input-with-select/trigger") tabindex=@tabindex}}
         @triggerId={{@triggerId}}
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 09cb46664d..b208136409 100644
--- a/ghost/admin/app/components/gh-input-with-select/trigger.js
+++ b/ghost/admin/app/components/gh-input-with-select/trigger.js
@@ -58,7 +58,17 @@ export default class GhSearchInputTrigger extends Component {
     }
 
     @action
-    handleBlur() {
+    handleBlur(event) {
+        if (event?.relatedTarget) {
+            const thisInputTrigger = this.inputElem.closest('.ember-basic-dropdown-trigger');
+            const relatedInputTrigger = event.relatedTarget.closest('.ember-basic-dropdown-trigger');
+
+            if (relatedInputTrigger !== thisInputTrigger) {
+                this.args.select.actions.search('');
+                this.close();
+            }
+        }
+
         if (this.args.extra.value && this.args.select.searchText === this.args.extra.value) {
             this.args.select.actions.search('');
             this.close();