From f1d6ad2645fcc206b43454400e2c70d1d23a4ee3 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 4 Mar 2024 12:38:02 +0100
Subject: [PATCH] [FIX] website: fix searchbar menu position

Steps to reproduce the bug:

- In Website edit mode.
- Drag & drop a "inner content" search snippet into the footer.
- Save the page.
- Enter the letter "h" in the input.
- Bug: The dropdown doesn't adapt properly and increases the height of
the page.

This commit fixes this issue by detecting if the searchbar menu
overflows at the bottom of the page when it's open. If it does, we
reduce its height, and if it still overflows despite the reduced height,
then we move it above the search bar instead of below.

task-3751401

closes odoo/odoo#160426

X-original-commit: d6fb56556c08a1c3aac5951991d40d403e235b90
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
---
 .../static/src/snippets/s_searchbar/000.js    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/addons/website/static/src/snippets/s_searchbar/000.js b/addons/website/static/src/snippets/s_searchbar/000.js
index 319357f7ac0..63f1399e2fd 100644
--- a/addons/website/static/src/snippets/s_searchbar/000.js
+++ b/addons/website/static/src/snippets/s_searchbar/000.js
@@ -142,6 +142,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
             delete this._menuScrollAndResizeHandler;
         }
 
+        let pageScrollHeight = null;
         const $prevMenu = this.$menu;
         if (res && this.limit) {
             const results = res['results'];
@@ -180,6 +181,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
                 }
             }
 
+            pageScrollHeight = document.querySelector("#wrapwrap").scrollHeight;
             this.$el.append(this.$menu);
 
             this.$el.find('button.extra_link').on('click', function (event) {
@@ -198,6 +200,24 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
         if ($prevMenu) {
             $prevMenu.remove();
         }
+        // Adjust the menu's position based on the scroll height.
+        if (res && this.limit) {
+            this.el.classList.remove("dropup");
+            delete this.$menu[0].dataset.bsPopper;
+            const wrapwrapEl = document.querySelector("#wrapwrap");
+            if (wrapwrapEl.scrollHeight > pageScrollHeight) {
+                // If the menu overflows below the page, we reduce its height.
+                this.$menu[0].style.maxHeight = "40vh";
+                this.$menu[0].style.overflowY = "auto";
+                // We then recheck if the menu still overflows below the page.
+                if (wrapwrapEl.scrollHeight > pageScrollHeight) {
+                    // If the menu still overflows below the page after its height
+                    // has been reduced, we position it above the input.
+                    this.el.classList.add("dropup");
+                    this.$menu[0].dataset.bsPopper = "";
+                }
+            }
+        }
     },
     _getFieldsNames() {
         return [