[FIX] web_editor: fix overlay when scrolling

Since the new effects on the header, the overlays do not overlap
correctly after the page has been scrolled. Now we hide the overlays
during the scrolling and show/recompute it after the scrolling.

Part of https://github.com/odoo/odoo/pull/51446
task-2229127

X-original-commit: 209a94d8c4fcdc2e74860c9392fc14a35aec52ed

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -391,11 +391,11 @@ var SnippetEditor = Widget.extend({
         return show;
     },
     /**
-     * @param {boolean} [isTextEdition=false]
+     * @param {boolean} [show=false]
      */
-    toggleTextEdition: function (isTextEdition) {
-        if (this.$el) {
-            this.$el.toggleClass('o_keypress', !!isTextEdition && this.isShown());
+    toggleOverlayVisibility: function (show) {
+        if (this.$el && !this.scrollingTimeout) {
+            this.$el.toggleClass('o_overlay_hidden', !show && this.isShown());
         }
     },
     /**
@@ -978,14 +978,31 @@ var SnippetsMenu = Widget.extend({
         // again when the mouse moves
         this.$document.on('keydown.snippets_menu', () => {
             this.snippetEditors.forEach(editor => {
-                editor.toggleTextEdition(true);
+                editor.toggleOverlayVisibility(false);
             });
         });
-        this.$document.on('mousemove.snippets_menu, mousedown.snippets_menu', () => {
+        this.$document.on('mousemove.snippets_menu, mousedown.snippets_menu', _.throttle(() => {
             this.snippetEditors.forEach(editor => {
-                editor.toggleTextEdition(false);
+                editor.toggleOverlayVisibility(true);
             });
-        });
+        }, 250));
+
+        // Hide the active overlay when scrolling.
+        // Show it again and recompute all the overlays after the scroll.
+        // TODO: current limitation, suppose that this is the body which scrolls
+        this.$document.on('scroll.snippets_menu', _.throttle(() => {
+            for (const editor of this.snippetEditors) {
+                editor.toggleOverlayVisibility(false);
+            }
+            clearTimeout(this.scrollingTimeout);
+            this.scrollingTimeout = setTimeout(() => {
+                this._scrollingTimeout = null;
+                for (const editor of this.snippetEditors) {
+                    editor.toggleOverlayVisibility(true);
+                    editor.cover();
+                }
+            }, 250);
+        }, 50));
 
         // Auto-selects text elements with a specific class and remove this
         // on text changes

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3697,7 +3697,7 @@ registry.many2one = SnippetOptionWidget.extend({
         this.$search.find('input')
             .focus()
             .on('keyup', function (e) {
-                self.$overlay.removeClass('o_keypress');
+                self.$overlay.removeClass('o_overlay_hidden');
                 self._findExisting($(this).val());
             });
 

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1100,8 +1100,9 @@ body.editor_enable.editor_has_snippets {
         text-align: center;
         transition: opacity 400ms linear 0s;
 
-        &.o_keypress {
+        &.o_overlay_hidden {
             opacity: 0;
+            transition: none;
         }
         &.oe_active {
             display: block;