[FIX] website_sale: allow to use the searchbar snippet in mega menus

Before this commit, when searching something via the searchbar snippet
when it is in a mega menu, the dropdown that appears could not overflow
the mega menu dropdown and thus was mostly hidden.

opw-2779432

closes odoo/odoo#91378

X-original-commit: 3bc2ce2d
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website_sale/static/src/js/website_sale.js

@@ -538,7 +538,7 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
 
         params.product_custom_attribute_values = JSON.stringify(params.product_custom_attribute_values);
         params.no_variant_attribute_values = JSON.stringify(params.no_variant_attribute_values);
-        
+
         if (this.isBuyNow) {
             params.express = true;
         }

addons/website_sale/static/src/snippets/s_products_searchbar/000.js

@@ -48,11 +48,29 @@ publicWidget.registry.productsSearchBar = publicWidget.Widget.extend({
 
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        this._render(null);
+    },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     */
+    _adaptToScrollingParent() {
+        const bcr = this.el.getBoundingClientRect();
+        this.$menu[0].style.setProperty('position', 'fixed', 'important');
+        this.$menu[0].style.setProperty('top', `${bcr.bottom}px`, 'important');
+        this.$menu[0].style.setProperty('left', `${bcr.left}px`, 'important');
+        this.$menu[0].style.setProperty('max-width', `${bcr.width}px`, 'important');
+        this.$menu[0].style.setProperty('max-height', `${document.body.clientHeight - bcr.bottom - 16}px`, 'important');
+    },
     /**
      * @private
      */
@@ -75,6 +93,13 @@ publicWidget.registry.productsSearchBar = publicWidget.Widget.extend({
      * @private
      */
     _render: function (res) {
+        if (this._scrollingParentEl) {
+            this._scrollingParentEl.removeEventListener('scroll', this._menuScrollAndResizeHandler);
+            window.removeEventListener('resize', this._menuScrollAndResizeHandler);
+            delete this._scrollingParentEl;
+            delete this._menuScrollAndResizeHandler;
+        }
+
         var $prevMenu = this.$menu;
         this.$el.toggleClass('dropdown show', !!res);
         if (res) {
@@ -86,8 +111,30 @@ publicWidget.registry.productsSearchBar = publicWidget.Widget.extend({
                 widget: this,
             }));
             this.$menu.css('min-width', this.autocompleteMinWidth);
+
+            // Handle the case where the searchbar is in a mega menu by making
+            // it position:fixed and forcing its size. Note: this could be the
+            // default behavior or at least needed in more cases than the mega
+            // menu only (all scrolling parents). But as a stable fix, it was
+            // easier to fix that case only as a first step, especially since
+            // this cannot generically work on all scrolling parent.
+            const megaMenuEl = this.el.closest('.o_mega_menu');
+            if (megaMenuEl) {
+                const navbarEl = this.el.closest('.navbar');
+                const navbarTogglerEl = navbarEl ? navbarEl.querySelector('.navbar-toggler') : null;
+                if (navbarTogglerEl && navbarTogglerEl.clientWidth < 1) {
+                    this._scrollingParentEl = megaMenuEl;
+                    this._menuScrollAndResizeHandler = () => this._adaptToScrollingParent();
+                    this._scrollingParentEl.addEventListener('scroll', this._menuScrollAndResizeHandler);
+                    window.addEventListener('resize', this._menuScrollAndResizeHandler);
+
+                    this._adaptToScrollingParent();
+                }
+            }
+
             this.$el.append(this.$menu);
         }
+
         if ($prevMenu) {
             $prevMenu.remove();
         }