[FIX] web, website: further neutralize BS dropdown when editing submenu

Since [1] when the mega menu were first introduced, to make their
edition possible, the bootstrap dropdown behavior was neutralized by
removing the `data-[bs-]toggle` attribute.

In [2] when Bootstrap was upgraded to version 5.1.3, the
`dataApiKeydownHandler` event handler that is called when up, down or
escape are pressed raises an error if `data-bs-toggle` cannot be found
on a previous sibling of the dropdown. This makes the approach chosen
in [1] incomplete.

This commit avoids this issue by temporarily adding a class that
is excluded from the event handler selector.
The patch must unfortunately be applied within bootstrap itself because
the event handler is registered right after the method is defined and
we have no way to access the registered event handlers afterwards.
This makes it impossible to patch the called method from outside, nor
its associated selector.

We cannot simply update the selector that was already patched by [3]
because it is also used by other methods.

A test is included which should mitigate the risk of accidentally losing
this patch upon bootstrap upgrades.

Steps to reproduce:
- Create a mega menu.
- Edit the page.
- Open the mega menu.
- Click inside the mega menu content to have a cursor selection.
- Press the arrow up key, the arrow down key or the escape key.

=> An error dialog was displayed.

The same issue happened with a nested menu instead of a mega menu.

[1]: https://github.com/odoo/odoo/commit/1345702258adbfbee0d780dc22e552395e6d1df7
[2]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968
[3]: https://github.com/odoo/odoo/commit/daca8fe4e3da4a5ad5fabf3730496a3919af8abc



task-3614926
opw-3741670

closes odoo/odoo#154409

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web/static/lib/bootstrap/js/dist/dropdown.js

@@ -257,6 +257,7 @@
   const CLASS_NAME_NAVBAR = 'navbar';
   const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]';
   const SELECTOR_MENU = '.dropdown-menu:not(.o-dropdown--menu)';
+  const SELECTOR_MENU_NOT_SUB = '.dropdown-menu:not(.o-dropdown--menu):not(.o_wysiwyg_submenu)';
   const SELECTOR_NAVBAR_NAV = '.navbar-nav';
   const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)';
   const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start';
@@ -665,7 +666,7 @@
 
 
   EventHandler__default.default.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler);
-  EventHandler__default.default.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
+  EventHandler__default.default.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU_NOT_SUB, Dropdown.dataApiKeydownHandler);
   EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
   EventHandler__default.default.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
   EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {

addons/website/static/src/js/editor/wysiwyg.js

@@ -59,6 +59,8 @@ const WebsiteWysiwyg = Wysiwyg.extend({
         // Dropdown menu initialization: handle dropdown openings by hand
         var $dropdownMenuToggles = $editableWindow.$('.o_mega_menu_toggle, #top_menu_container .dropdown-toggle');
         $dropdownMenuToggles.removeAttr('data-bs-toggle').dropdown('dispose');
+        // Since bootstrap 5.1.3, removing bsToggle is not sufficient anymore.
+        $dropdownMenuToggles.siblings(".dropdown-menu").addClass("o_wysiwyg_submenu");
         $dropdownMenuToggles.on('click.wysiwyg_megamenu', ev => {
             this.odooEditor.observerUnactive();
             var $toggle = $(ev.currentTarget);
@@ -237,7 +239,7 @@ const WebsiteWysiwyg = Wysiwyg.extend({
             // menu itself.
             // FIXME normally removing the 'show' class should not be necessary here
             // TODO check that editor classes are removed here as well
-            var classes = _.without($el.attr('class').split(' '), 'dropdown-menu', 'o_mega_menu', 'show');
+            const classes = _.without($el.attr("class").split(" "), "dropdown-menu", "o_mega_menu", "show", "o_wysiwyg_submenu");
             promises.push(this._rpc({
                 model: 'website.menu',
                 method: 'write',

addons/website/static/tests/tours/edit_megamenu.js

@@ -80,6 +80,14 @@ wTourUtils.registerWebsitePreviewTour('edit_megamenu', {
         trigger: 'iframe .o_mega_menu h4',
         run: 'text New Menu Item',
     },
+    {
+        // If this step fails, it means that a patch inside bootstrap was lost.
+        content: "Press the 'down arrow' key.",
+        trigger: 'iframe .o_mega_menu h4',
+        run: function (actions) {
+            this.$anchor[0].dispatchEvent(new window.KeyboardEvent("keydown", { key: "ArrowDown" }));
+        },
+    },
     ...wTourUtils.clickOnSave(),
     wTourUtils.clickOnExtraMenuItem({extra_trigger: 'iframe body:not(.editor_enable)'}, true),
     toggleMegaMenu(),

addons/website/static/tests/tours/edit_menus.js

@@ -260,5 +260,18 @@ wTourUtils.registerWebsitePreviewTour('edit_menus', {
         trigger: 'iframe #top_menu .nav-item:has(a.o_mega_menu_toggle:contains("Megaaaaa!")) ' +
                  '.s_mega_menu_odoo_menu',
         run: () => {}, // It's a check.
-    }
+    },
+    ...wTourUtils.clickOnEditAndWaitEditMode(),
+    {
+        content: "Open nested menu item",
+        trigger: 'iframe #top_menu .nav-item:contains("Home"):nth(1) .dropdown-toggle',
+    },
+    {
+        // If this step fails, it means that a patch inside bootstrap was lost.
+        content: "Press the 'down arrow' key.",
+        trigger: 'iframe #top_menu .nav-item:contains("Home") li:contains("Contact us")',
+        run: function (actions) {
+            this.$anchor[0].dispatchEvent(new window.KeyboardEvent("keydown", { key: "ArrowDown" }));
+        },
+    },
 ]);