diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index a52e905f2aa..eecc52ad11a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -549,6 +549,7 @@ var SnippetEditor = Widget.extend({
         // Show/hide overlay in preview mode or not
         this.$el.toggleClass('oe_active', show);
         this.cover();
+        this.toggleOverlayVisibility(show);
     },
     /**
      * Updates the UI of the editor (+ parent) options and call onFocus/onBlur
@@ -1525,6 +1526,16 @@ var SnippetsMenu = Widget.extend({
     activateCustomTab: function (content) {
         this._updateRightPanelContent({content: content, tab: this.tabs.CUSTOM});
     },
+    /**
+     * Public method to activate a snippet.
+     *
+     * @see this._activateSnippet
+     * @param {jQuery} $snippet
+     * @returns {Promise}
+     */
+    activateSnippet: async function ($snippet) {
+        return this._activateSnippet($snippet);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/js/editor/wysiwyg.js b/addons/website/static/src/js/editor/wysiwyg.js
index 4a28e26bf3d..21905b96dc9 100644
--- a/addons/website/static/src/js/editor/wysiwyg.js
+++ b/addons/website/static/src/js/editor/wysiwyg.js
@@ -96,10 +96,7 @@ Wysiwyg.include({
             // Then toggle the clicked one
             toggleDropdown($toggle)
                 .then(dispose)
-                .then($el => {
-                    var isShown = $el.parent().hasClass('show');
-                    this.snippetsMenu.toggleMegaMenuSnippets(isShown);
-                });
+                .then(() => this._toggleMegaMenu($toggle[0]));
         });
 
         // Ensure :blank oe_structure elements are in fact empty as ':blank'
@@ -110,12 +107,7 @@ Wysiwyg.include({
             }
         }
 
-        return this._super.apply(this, arguments).then(() => {
-            // Showing Mega Menu snippets if one dropdown is already opened
-            if (this.$('.o_mega_menu').hasClass('show')) {
-                this.snippetsMenu.toggleMegaMenuSnippets(true);
-            }
-        });
+        return this._super.apply(this, arguments);
     },
     /**
      * @override
@@ -233,32 +225,34 @@ Wysiwyg.include({
             .dropdown({});
         return toggleDropdown($megaMenuToggles, false);
     },
+    /**
+     * Toggles the mega menu.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _toggleMegaMenu: function (toggleEl) {
+        const megaMenuEl = toggleEl.parentElement.querySelector('.o_mega_menu');
+        if (!megaMenuEl || !megaMenuEl.classList.contains('show')) {
+            return this.snippetsMenu.activateSnippet(false);
+        }
+        return this.snippetsMenu.activateSnippet($(megaMenuEl));
+    },
 });
 
 snippetsEditor.SnippetsMenu.include({
     /**
-     * @private
-     * @param {boolean} show
+     * @override
      */
-    toggleMegaMenuSnippets: function (show) {
-        setTimeout(() => this._activateSnippet(false));
-        this._showMegaMenuSnippets = show;
-        this._filterSnippets();
+    init: function () {
+        this._super(...arguments);
+        this._notActivableElementsSelector += ', .o_mega_menu_toggle';
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     */
-    _filterSnippets(search) {
-        this._super(...arguments);
-        if (!this._showMegaMenuSnippets) {
-            this.el.querySelector('#snippet_mega_menu').classList.add('d-none');
-        }
-    },
     /**
      * @override
      */