From eff58a91ca3337e8b061618f43880282eda0259e Mon Sep 17 00:00:00 2001 From: Adnan Saiyed Date: Thu, 26 Oct 2023 11:13:09 +0000 Subject: [PATCH] [FIX] web_editor: events not getting caught in website Current behaviour before commit: When trying to crop image in website, 'mousedown' and 'keydown' events are not getting caught. Due to this - Crop is not getting closed when clicking on document - Cropped image is not getting saved when pressing enter Desired behaviour after commit: Now, events are added to the owner document of the crop widget. As result, - Crop gets closed when clicking anywhere in document - Image gets saved when pressing enter. task-3570524 closes odoo/odoo#158093 X-original-commit: afeba0d17a91d41ba2628524ccc03249835884b1 Signed-off-by: Antoine Guenet (age) Signed-off-by: Adnan Saiyed (adsa) --- .../static/src/js/wysiwyg/widgets/image_crop.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js index 355371b7b88..0fcba388ae6 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js @@ -76,8 +76,8 @@ export class ImageCrop extends Component { this._cropperClosed = true; if (this.$cropperImage) { this.$cropperImage.cropper('destroy'); - this.document.removeEventListener('mousedown', this._onDocumentMousedown, {capture: true}); - this.document.removeEventListener('keydown', this._onDocumentKeydown, {capture: true}); + this.elRef.el.ownerDocument.removeEventListener('mousedown', this._onDocumentMousedown, {capture: true}); + this.elRef.el.ownerDocument.removeEventListener('keydown', this._onDocumentKeydown, {capture: true}); } this.media.setAttribute('src', this.initialSrc); this.$media.trigger('image_cropper_destroyed'); @@ -175,8 +175,9 @@ export class ImageCrop extends Component { this._onDocumentKeydown = this._onDocumentKeydown.bind(this); // We use capture so that the handler is called before other editor handlers // like save, such that we can restore the src before a save. - this.document.addEventListener('mousedown', this._onDocumentMousedown, {capture: true}); - this.document.addEventListener('keydown', this._onDocumentKeydown, {capture: true}); + // We need to add event listeners to the owner document of the widget. + this.elRef.el.ownerDocument.addEventListener('mousedown', this._onDocumentMousedown, {capture: true}); + this.elRef.el.ownerDocument.addEventListener('keydown', this._onDocumentKeydown, {capture: true}); } /** * Updates the DOM image with cropped data and associates required @@ -302,7 +303,7 @@ export class ImageCrop extends Component { * @param {MouseEvent} ev */ _onDocumentMousedown(ev) { - if (document.body.contains(ev.target) && this.$(ev.target).length === 0) { + if (this.elRef.el.ownerDocument.body.contains(ev.target) && this.$(ev.target).length === 0) { return this._closeCropper(); } }