[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>

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 [