From aeec61476c64bc99a67a3fbf9cb902343abd578c Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Mon, 2 Sep 2024 08:13:08 +0000
Subject: [PATCH] typeahead: Fix compose topic typeahead partially hidden.

The `flip` popper function is not working properly here since
we migrated to use Simplebar (Can be verified by removing
`data-simplebar`).

To fix it, we need to force trigger the function as soon as tippy
is attached to DOM.

(cherry picked from commit 240c870815d8ec12b5579d286365088036c58e18)
---
 web/src/bootstrap_typeahead.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts
index b5e1d17e4d..6bbf8976c2 100644
--- a/web/src/bootstrap_typeahead.ts
+++ b/web/src/bootstrap_typeahead.ts
@@ -455,27 +455,27 @@ export class Typeahead<ItemType extends string | object> {
                     }
                     return [0, gap];
                 },
-                onShow(instance) {
-                    if (input_element.type === "textarea") {
-                        // Since we use an offset which can partially hide typeahead
-                        // at certain caret positions, we need to push it back into
-                        // view once we have rendered the typeahead. The movement
-                        // feels like an animation to the user.
-                        setTimeout(() => {
-                            // This detects any overflows by default and adjusts
-                            // the placement of typeahead.
-                            void instance.popperInstance?.update();
-                        }, 0);
-                    }
-                },
                 // We have event handlers to hide the typeahead, so we
                 // don't want tippy to hide it for us.
                 hideOnClick: false,
-                onMount: () => {
+                onMount: (instance) => {
                     // The container has `display: none` as a default style.
                     // We make sure to display it. For tippy elements, this
                     // must happen after we insert the typeahead into the DOM.
                     this.$container.show();
+                    // Reasons to update the position of the typeahead here:
+                    // * Simplebar causes the height of the typeahead to
+                    //   change, which can cause the typeahead to go off
+                    //   screen like in compose topic typeahead.
+                    // * Since we use an offset which can partially hide
+                    //   typeahead at certain caret positions in textarea
+                    //   input, we need to push it back into view once we
+                    //   have rendered the typeahead.
+                    requestAnimationFrame(() => {
+                        // This detects any overflows by default and adjusts
+                        // the placement of typeahead.
+                        void instance.popperInstance?.update();
+                    });
                 },
             });
         }