From e734df614a07d51cfd2c9eb6e3876189e1d22a69 Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Thu, 19 Nov 2020 10:39:38 +0000 Subject: [FIX] web_editor: fix scroll event on snippet popup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before this commit, when scrolling a snippet popup, the overlay was not updating its position. So now, we use addEventListener instead of jQuery for the scroll event on the scrolling element because we need the 'capture' parameter. Setting this capture parameter to true allows us to take advantage of event bubbling for events that otherwise don’t support it. Part of https://github.com/odoo/odoo/pull/61998 task-2312878 Co-authored-by: Samuel Degueldre --- addons/web_editor/static/src/js/editor/snippets.editor.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'addons/web_editor/static/src') 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 f38b38767ad..577132a6f27 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1079,7 +1079,7 @@ var SnippetsMenu = Widget.extend({ // Hide the active overlay when scrolling. // Show it again and recompute all the overlays after the scroll. this.$scrollingElement = $().getScrollingElement(); - this.$scrollingElement.on('scroll.snippets_menu', _.throttle(() => { + this._onScrollingElementScroll = _.throttle(() => { for (const editor of this.snippetEditors) { editor.toggleOverlayVisibility(false); } @@ -1091,7 +1091,12 @@ var SnippetsMenu = Widget.extend({ editor.cover(); } }, 250); - }, 50)); + }, 50) + // We use addEventListener instead of jQuery because we need 'capture'. + // Setting capture to true allows to take advantage of event bubbling + // for events that otherwise don’t support it. (e.g. useful when + // scrolling a modal) + this.$scrollingElement[0].addEventListener('scroll', this._onScrollingElementScroll, {capture: true}); // Auto-selects text elements with a specific class and remove this // on text changes @@ -1156,7 +1161,7 @@ var SnippetsMenu = Widget.extend({ this.$snippetEditorArea.remove(); this.$window.off('.snippets_menu'); this.$document.off('.snippets_menu'); - this.$scrollingElement.off('.snippets_menu'); + this.$scrollingElement[0].removeEventListener('scroll', this._onScrollingElementScroll, {capture: true}); } core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet); delete this.cacheSnippetTemplate[this.options.snippets]; -- cgit v1.2.3