From 358194e99ada7d91e1295392d96d2f4277f35378 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrien=20Dieudonn=C3=A9?= <adr@odoo.com>
Date: Wed, 17 Aug 2022 09:29:16 +0000
Subject: [PATCH] [FIX] website: searchbar: wrong usage of BS dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, we had a crash when a user types something in a
searchbar in the website (on /shop eg) and do keydowns:
"Cannot read properties of undefined (reading 'nextElementSibling')"

BS dropdown doesn't use JQuery anymore and is therefore less permissive
with empty arrays. Also note that the logic is different between BS4
and BS5.

To fix this, we need to make sure that all elements are in the DOM
before BS dropdown instanciation.
It's why we have to render the 'dropdown-menu' before the dropdown
constructor is triggered.

We also had to add the 'data-bs-toggle' attribute to let BS find it
to set '_element' (which must be the previous sibling of the dropdown-menu).
This data attribute was probably not set before because in this case
the BS dropdown is not used on a button or a link as documented;
we use it as an autocomplete functionnality.

closes odoo/odoo#98254

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 addons/website/static/src/snippets/s_searchbar/000.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/snippets/s_searchbar/000.js b/addons/website/static/src/snippets/s_searchbar/000.js
index b6a0a864e91..390ada2f540 100644
--- a/addons/website/static/src/snippets/s_searchbar/000.js
+++ b/addons/website/static/src/snippets/s_searchbar/000.js
@@ -33,6 +33,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
      */
     start: function () {
         this.$input = this.$('.search-query');
+        this.$searchGroup = this.$('.input-group');
 
         this.searchType = this.$input.data('searchType');
         this.order = this.$('.o_search_order_by').val();
@@ -149,7 +150,6 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
         }
 
         const $prevMenu = this.$menu;
-        this.$el.toggleClass('dropdown show', !!res);
         if (res && this.limit) {
             const results = res['results'];
             let template = 'website.s_searchbar.autocomplete';
@@ -166,6 +166,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
                 widget: this,
             }));
             this.$menu.css('min-width', this.autocompleteMinWidth);
+            this.$searchGroup[0].dataset['bsToggle'] = 'dropdown';
 
             // 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
@@ -201,6 +202,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({
             });
         }
 
+        this.$el.toggleClass('dropdown show', !!res);
         if ($prevMenu) {
             $prevMenu.remove();
         }