From 2a1b675af74a2bb719ad31d437dae9cf51a0deab Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 25 Mar 2024 22:58:11 +0100
Subject: [PATCH] FIX: attempts to update select-kit on keyboard (#26345)

Prior to this change the dropdown could appear offscreen due to its position not being updated after the appearance of the keyboard.
---
 .../select-kit/addon/components/select-kit.js | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 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 d7fc79ad70b..b3a6b7d369e 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -3,6 +3,7 @@ import EmberObject, { computed, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import Mixin from "@ember/object/mixin";
 import { bind, cancel, next, schedule, throttle } from "@ember/runloop";
+import { service } from "@ember/service";
 import { isEmpty, isNone, isPresent } from "@ember/utils";
 import { createPopper } from "@popperjs/core";
 import { Promise } from "rsvp";
@@ -10,6 +11,7 @@ import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
 import deprecated from "discourse-common/lib/deprecated";
 import { makeArray } from "discourse-common/lib/helpers";
+import { bind as bindDecorator } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import PluginApiMixin, {
   applyContentPluginApiCallbacks,
@@ -59,6 +61,7 @@ export default Component.extend(
     labelProperty: null,
     titleProperty: null,
     langProperty: null,
+    appEvents: service(),
 
     init() {
       this._super(...arguments);
@@ -192,6 +195,8 @@ export default Component.extend(
     didInsertElement() {
       this._super(...arguments);
 
+      this.appEvents.on("keyboard-visibility-change", this, this._updatePopper);
+
       if (this.selectKit.options.expandedOnInsert) {
         this._open();
       }
@@ -207,6 +212,12 @@ export default Component.extend(
 
       this._cancelSearch();
 
+      this.appEvents.off(
+        "keyboard-visibility-change",
+        this,
+        this._updatePopper
+      );
+
       if (this.popper) {
         this.popper.destroy();
         this.popper = null;
@@ -375,7 +386,7 @@ export default Component.extend(
         this.errorsCollection.pushObject(error);
       }
 
-      this._safeAfterRender(() => this.popper && this.popper.update());
+      this._safeAfterRender(() => this._updatePopper());
     },
 
     clearErrors() {
@@ -409,7 +420,7 @@ export default Component.extend(
     },
 
     _onInput(event) {
-      this.popper && this.popper.update();
+      this._updatePopper();
 
       if (this._searchPromise) {
         cancel(this._searchPromise);
@@ -481,7 +492,7 @@ export default Component.extend(
           if (this.selectKit.options.focusAfterOnChange) {
             this._safeAfterRender(() => {
               this._focusFilter();
-              this.popper && this.popper.update();
+              this._updatePopper();
             });
           }
         }
@@ -641,7 +652,7 @@ export default Component.extend(
         "selectKit.isLoading": true,
         "selectKit.enterDisabled": true,
       });
-      this._safeAfterRender(() => this.popper && this.popper.update());
+      this._safeAfterRender(() => this._updatePopper());
 
       let content = [];
 
@@ -707,7 +718,7 @@ export default Component.extend(
 
           this._safeAfterRender(() => {
             if (this.selectKit.isExpanded) {
-              this.popper && this.popper.update();
+              this._updatePopper();
               this._focusFilter();
             }
           });
@@ -1024,7 +1035,7 @@ export default Component.extend(
       this._safeAfterRender(() => {
         this._focusFilter();
         this._scrollToCurrent();
-        this.popper && this.popper.update();
+        this._updatePopper();
       });
     },
 
@@ -1102,6 +1113,11 @@ export default Component.extend(
       this._handleDeprecatedArgs();
     },
 
+    @bindDecorator
+    _updatePopper() {
+      this.popper?.update?.();
+    },
+
     _computePlacementStrategy() {
       let placementStrategy = this.selectKit.options.placementStrategy;