[FIX] web_editor: fix snippet drag and drop after scrolling

Before this commit, the positions of the drop zones were not updated
after scrolling the page while dragging a snippet. It was because
jQuery ignored the scroll of the scrollable element to refresh the
position of the drop zones. We had to trigger the scroll on the
draggable element when the scrollable element is scrolled to make it
works.

task-2312878

closes odoo/odoo#61334

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 16 insertions, 1 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 15a4873bdc9..961233a477b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -56,6 +56,7 @@ var SnippetEditor = Widget.extend({
         this.templateOptions = templateOptions;
         this.isTargetParentEditable = false;
         this.isTargetMovable = false;
+        this.$scrollingElement = $().getScrollingElement();
 
         this.__isStarted = new Promise(resolve => {
             this.__isStartedResolveFunc = resolve;
@@ -658,6 +659,11 @@ var SnippetEditor = Widget.extend({
                 }
             },
         });
+        // Trigger a scroll on the draggable element so that jQuery updates
+        // the position of the drop zones.
+        this.$scrollingElement.on('scroll.scrolling_element', function () {
+            self.$el.trigger('scroll');
+        });
     },
     /**
      * Called when the snippet is dropped after being dragged thanks to the
@@ -718,6 +724,7 @@ var SnippetEditor = Widget.extend({
         this.trigger_up('drag_and_drop_stop', {
             $snippet: this.$target,
         });
+        this.$scrollingElement.off('scroll.scrolling_element');
     },
     /**
      * @private
@@ -1912,6 +1919,7 @@ var SnippetsMenu = Widget.extend({
         var $toInsert, dropped, $snippet;
 
         let dragAndDropResolve;
+        const $scrollingElement = $().getScrollingElement();
 
         const smoothScrollOptions = this._getScrollOptions({
             jQueryDraggableOptions: {
@@ -1979,11 +1987,18 @@ var SnippetsMenu = Widget.extend({
                         },
                     });
 
+                    // Trigger a scroll on the draggable element so that jQuery updates
+                    // the position of the drop zones.
+                    $scrollingElement.on('scroll.scrolling_element', function () {
+                        self.$el.trigger('scroll');
+                    });
+
                     const prom = new Promise(resolve => dragAndDropResolve = () => resolve());
                     self._mutex.exec(() => prom);
                 },
                 stop: async function (ev, ui) {
                     $toInsert.removeClass('oe_snippet_body');
+                    $scrollingElement.off('scroll.scrolling_element');
 
                     if (!dropped && ui.position.top > 3 && ui.position.left + ui.helper.outerHeight() < self.el.getBoundingClientRect().left) {
                         var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
@@ -2039,7 +2054,7 @@ var SnippetsMenu = Widget.extend({
                 },
             },
         });
-        this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, $().getScrollingElement(), smoothScrollOptions);
+        this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, $scrollingElement, smoothScrollOptions);
     },
     /**
      * Adds the 'o_default_snippet_text' class on nodes which contain only