From e639005a5f2a1cd2ef0d720699d69644905d248d Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Thu, 25 Aug 2022 14:25:12 +0000 Subject: [PATCH] [FIX] web_editor: correct TablePicker positioning and events in iframe The TablePicker didn't take into account the position of its parent iframe when positioning itself, and failed to bind its events on the document in which it was attached. This led to wrong positioning and interaction failures. closes odoo/odoo#99208 X-original-commit: 3bb0aaaa0833e3d72fbb07e47e42441e293babb7 Signed-off-by: David Monjoie (dmo) --- .../src/js/editor/odoo-editor/src/OdooEditor.js | 1 + .../odoo-editor/src/tablepicker/TablePicker.js | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index 15be69e02cf..fb1c3a3e892 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -327,6 +327,7 @@ export class OdooEditor extends EventTarget { this.powerboxTablePicker = new TablePicker({ document: this.document, floating: true, + getContextFromParentRect: this.options.getContextFromParentRect, }); document.body.appendChild(this.powerboxTablePicker.el); this.powerboxTablePicker.addEventListener('cell-selected', ev => { diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js index c9e5511550d..00c16ece552 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js @@ -7,6 +7,7 @@ export class TablePicker extends EventTarget { this.options = options; this.options.minRowCount = this.options.minRowCount || 3; this.options.minColCount = this.options.minColCount || 3; + this.options.getContextFromParentRect = this.options.getContextFromParentRect || (() => ({ top: 0, left: 0 })); this.rowNumber = this.options.minRowCount; this.colNumber = this.options.minColCount; @@ -41,11 +42,11 @@ export class TablePicker extends EventTarget { const extraRow = 1; for (let rowNumber = 1; rowNumber <= rowCount + extraRow; rowNumber++) { - const rowElement = this.options.document.createElement('div'); + const rowElement = document.createElement('div'); rowElement.classList.add('oe-tablepicker-row'); this.tablePickerElement.appendChild(rowElement); for (let colNumber = 1; colNumber <= colCount + extraCol; colNumber++) { - const cell = this.options.document.createElement('div'); + const cell = this.el.ownerDocument.createElement('div'); cell.classList.add('oe-tablepicker-cell', 'btn'); rowElement.appendChild(cell); @@ -61,9 +62,9 @@ export class TablePicker extends EventTarget { this.render(); } }); - this.options.document.removeEventListener('mousemove', bindMouseMove); + this.el.ownerDocument.removeEventListener('mousemove', bindMouseMove); }; - this.options.document.addEventListener('mousemove', bindMouseMove); + this.el.ownerDocument.addEventListener('mousemove', bindMouseMove); cell.addEventListener('mousedown', this.selectCell.bind(this)); } } @@ -133,9 +134,10 @@ export class TablePicker extends EventTarget { } }; + const parentContextRect = this.options.getContextFromParentRect(); const offset = getRangePosition(this.el, this.options.document); - this.el.style.left = `${offset.left}px`; - this.el.style.top = `${offset.top}px`; + this.el.style.left = `${parentContextRect.left + offset.left}px`; + this.el.style.top = `${parentContextRect.top + offset.top}px`; const stop = () => { this.hide();