From 70ba5e51889606aa631c2a605b8761bcd50214b0 Mon Sep 17 00:00:00 2001
From: Ger Teck <changerteck@gmail.com>
Date: Sun, 11 Aug 2024 11:51:32 +0800
Subject: [PATCH] Fix Searchbar dropdown-menu positioning  (#2567)

Fix initial dropdown-menu positioning by replacing d-none
with visibility:hidden. Popper.js cannot calculate the position of
elements removed from the DOM with display: none. Let's
replace d-none with visibility:hidden, keeping the element
in the DOM, allowing Popper.js to correctly calculate its position.
---
 packages/vue-components/src/Searchbar.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue
index 54d755277a..b6f8d130a3 100644
--- a/packages/vue-components/src/Searchbar.vue
+++ b/packages/vue-components/src/Searchbar.vue
@@ -187,8 +187,8 @@ export default {
       return [
         'dropdown-menu',
         'search-dropdown-menu',
-        { show: this.showDropdown },
-        { 'd-none': !this.showDropdown },
+        { 'show': this.showDropdown },
+        { 'dropdown-menu-hidden': !this.showDropdown },
         { 'dropdown-menu-end': this.menuAlignRight },
       ];
     },
@@ -304,6 +304,10 @@ export default {
         visibility: hidden;
         overflow: hidden;
     }
+
+    .dropdown-menu-hidden {
+        visibility: hidden;
+    }
 </style>
 
 <style>