From bf3e908f66ca33f4bc4a14045dd319ab7841fce0 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 18 Aug 2023 11:23:06 -0400
Subject: [PATCH] FIX: Compact tag picker input not focused in iOS (#22922)
 (#23090)

Should fix an iOS regression in f5e8e73. iOS does not pull up the keyboard if the `.focus()` call is delayed by a rendering timeout or an asynchronous ajax call. This PR adds earlier `.focus()` calls if the input element is present.
---
 .../select-kit/addon/components/select-kit.js | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index a2c617320bb..e1fc205f835 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -1004,6 +1004,10 @@ export default Component.extend(
           this.selectKit.options.filterable || this.selectKit.options.allowAny,
       });
 
+      if (this.selectKit.options.useHeaderFilter) {
+        this._focusFilterInput();
+      }
+
       this.triggerSearch();
 
       this._safeAfterRender(() => {
@@ -1044,14 +1048,16 @@ export default Component.extend(
         return;
       }
 
+      // setting focus as early as possible is best for iOS
+      // because render/promise delays may cause keyboard not to show
+      if (!forceHeader) {
+        this._focusFilterInput();
+      }
+
       this._safeAfterRender(() => {
         const input = this.getFilterInput();
         if (!forceHeader && input) {
-          input.focus({ preventScroll: true });
-
-          if (typeof input.selectionStart === "number") {
-            input.selectionStart = input.selectionEnd = input.value.length;
-          }
+          this._focusFilterInput();
         } else if (!this.selectKit.options.preventHeaderFocus) {
           const headerContainer = this.getHeader();
           headerContainer && headerContainer.focus({ preventScroll: true });
@@ -1059,6 +1065,18 @@ export default Component.extend(
       });
     },
 
+    _focusFilterInput() {
+      const input = this.getFilterInput();
+
+      if (input && document.activeElement !== input) {
+        input.focus({ preventScroll: true });
+
+        if (typeof input.selectionStart === "number") {
+          input.selectionStart = input.selectionEnd = input.value.length;
+        }
+      }
+    },
+
     getFilterInput() {
       return document.querySelector(`#${this.selectKit.uniqueID}-filter input`);
     },