[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]: odoo@1345702
[2]: odoo@971e5a9
[3]: odoo@daca8fe

task-3614926
opw-3741670

closes odoo#155019

X-original-commit: 48f0c42
Signed-off-by: Quentin Smetz (qsm) <[email protected]>
Signed-off-by: Benoit Socias (bso) <[email protected]>

addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -168,6 +168,8 @@ export class WysiwygAdapterComponent extends Wysiwyg {
         // Dropdown menu initialization: handle dropdown openings by hand
         var $dropdownMenuToggles = $editableWindow.$('.o_mega_menu_toggle, #o_main_nav .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);
@@ -935,7 +937,7 @@ export class WysiwygAdapterComponent extends Wysiwyg {
             // FIXME normally removing the 'show' class should not be necessary here
             // TODO check that editor classes are removed here as well
             const classes = [...$el[0].classList].filter(megaMenuClass =>
-                ["dropdown-menu", "o_mega_menu", "show"].indexOf(megaMenuClass) < 0);
+                ["dropdown-menu", "o_mega_menu", "show", "o_wysiwyg_submenu"].indexOf(megaMenuClass) < 0);
             promises.push(
                 this.orm.write('website.menu', [parseInt($el.data('oe-id'))], {
                     'mega_menu_classes': classes.join(' '),

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

@@ -85,6 +85,14 @@ wTourUtils.registerWebsitePreviewTour('edit_megamenu', {
         allowInvisible: true,
         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({}, true),
     toggleMegaMenu(),

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

@@ -274,5 +274,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" }));
+        },
+    },
 ]);