From 4848c3aed729c70f10dacc46a19d95b4ea064191 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 18 May 2020 15:04:31 +0000
Subject: [PATCH] [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
---
 .../static/src/js/editor/snippets.editor.js   | 33 ++++++++++++++-----
 .../static/src/js/editor/snippets.options.js  |  2 +-
 .../static/src/scss/wysiwyg_snippets.scss     |  3 +-
 3 files changed, 28 insertions(+), 10 deletions(-)

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 3dfe8a06ffd..7ded24d6830 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/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
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index daa53fb7dae..ff2aea2d7b7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/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());
             });
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 0fbd1e7925b..fbf49e1db67 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/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;