[FIX] website: fix mega menu items text edition

When inserting a new paragraph by pressing 'enter', it would
automatically close the mega menu.

As inserting a new paragraph triggers a historyRevert at the editor
level, it was leading to two issues:
- The widgets of the public root were stopped then restarted. The
StandardAffixedHeader (the public widget for the header), as an
Animation, would start its effects when started, which would close its
dropdowns. This commit changes the _updateHeaderOnScroll method to close
opened menus and dropdowns only when the animation has scrolled.
- Opening the dropdown was a recorded step. When history was reverted,
it would close it. Now toggling the mega menu is done with the editor
observer unactive.

task-2668908

closes odoo/odoo#81559

X-original-commit: 675430d53f6ef048b77afe95395bd760d3f5a2be
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/content/menu.js

@@ -25,6 +25,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
         this.fixedHeader = false;
         this.scrolledPoint = 0;
         this.hasScrolled = false;
+        this.closeOpenedMenus = false;
     },
     /**
      * @override
@@ -167,6 +168,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
             }
         } else {
             this.$el.removeClass('o_header_no_transition');
+            this.closeOpenedMenus = true;
         }
 
         // Indicates the page is scrolled, the logo size is changed.
@@ -177,9 +179,10 @@ const BaseAnimatedHeader = animations.Animation.extend({
             this.headerIsScrolled = headerIsScrolled;
         }
 
-        // Close opened menus
-        this.$dropdowns.removeClass('show');
-        this.$navbarCollapses.removeClass('show').attr('aria-expanded', false);
+        if (this.closeOpenedMenus) {
+            this.$dropdowns.removeClass('show');
+            this.$navbarCollapses.removeClass('show').attr('aria-expanded', false);
+        }
     },
     /**
      * Called when the window is resized

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

@@ -55,6 +55,7 @@ Wysiwyg.include({
         var $dropdownMenuToggles = this.$('.o_mega_menu_toggle, #top_menu_container .dropdown-toggle');
         $dropdownMenuToggles.removeAttr('data-toggle').dropdown('dispose');
         $dropdownMenuToggles.on('click.wysiwyg_megamenu', ev => {
+            this.odooEditor.observerUnactive();
             var $toggle = $(ev.currentTarget);
 
             // Each time we toggle a dropdown, we will destroy the dropdown
@@ -67,7 +68,8 @@ Wysiwyg.include({
             // Then toggle the clicked one
             toggleDropdown($toggle)
                 .then(dispose)
-                .then(() => this._toggleMegaMenu($toggle[0]));
+                .then(() => this._toggleMegaMenu($toggle[0]))
+                .then(() => this.odooEditor.observerActive());
         });
 
         // Ensure :blank oe_structure elements are in fact empty as ':blank'

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

@@ -4,6 +4,18 @@ odoo.define("website.tour.edit_megamenu", function (require) {
 const tour = require('web_tour.tour');
 const wTourUtils = require('website.tour_utils');
 
+const toggleMegaMenu = (stepOptions) => Object.assign({}, {
+    content: "Toggles the mega menu.",
+    trigger: '#top_menu .nav-item a.o_mega_menu_toggle',
+    run: function () {
+        // If the mega menu is displayed inside the extra menu items, it should
+        // already be displayed.
+        if (!this.$anchor[0].closest('.o_extra_menu_items')) {
+            this.$anchor.click();
+        }
+    },
+}, stepOptions);
+
 tour.register('edit_megamenu', {
     test: true,
     url: '/?enable_editor=1',
@@ -38,10 +50,32 @@ tour.register('edit_megamenu', {
         trigger: '.modal-dialog .btn-primary span:contains("Save")',
         run: 'click',
     },
-    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'a[data-action=edit]'}),
+    // Edit a menu item
+    wTourUtils.clickOnEdit(),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: '#oe_snippets.o_loaded'}),
+    toggleMegaMenu({extra_trigger: '#top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")'}),
     {
-        content: "Menu should have a new megamenu item",
-        trigger: '#top_menu .nav-item a.o_mega_menu_toggle:contains("Megaaaaa!")',
+        content: "Clicks on the first title item.",
+        trigger: '.o_mega_menu h4',
+    },
+    {
+        content: "Press enter.",
+        trigger: '.o_mega_menu h4',
+        run: function (actions) {
+            this.$anchor[0].dispatchEvent(new window.InputEvent('input', {bubbles: true, inputType: 'insertParagraph'}));
+        },
+    },
+    {
+        content: "The menu should still be visible. Edit a menu item.",
+        trigger: '.o_mega_menu h4',
+        run: 'text New Menu Item',
+    },
+    ...wTourUtils.clickOnSave(),
+    wTourUtils.clickOnExtraMenuItem({extra_trigger: 'a[data-action=edit]'}),
+    toggleMegaMenu(),
+    {
+        content: "The menu item should have been renamed.",
+        trigger: '.o_mega_menu h4:contains("New Menu Item")',
         run: function () {}, // it's a check
     },
 ]);