From 8da12ebd7511dbe8f7b1044e24b00de7ec721b7b Mon Sep 17 00:00:00 2001
From: Shubham Thanki <shut@odoo.com>
Date: Fri, 10 Nov 2023 13:27:48 +0000
Subject: [PATCH] [FIX] mail: stop the bubbling of various click events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Technical Reason:
- The events bound to the specific elements inside the `FileViewer` are
propagating/bubbling up and are triggering the `onGlobalClick`
(https://github.com/odoo/enterprise/blob/eaf40edbbacfc6a8eb9e0137c20e7f94b1f5d723/documents/static/src/views/kanban/documents_kanban_renderer.js#L36-L42)
event bound on the `DocumentsKanbanRenderer`.
(https://github.com/odoo/enterprise/blob/71dbc617d6fe533c4d0153361f9711bd4c9e4885/documents/static/src/views/kanban/documents_kanban_renderer.xml#L6)

After this commit:
- Only the events bound to the specific HTMLElements are now triggered.
- We successfully prevent the un-necessary call of the `onGlobalClick`
method mentioned above.

Refer the related enterprise PR for the test case of this fix.

Task-3489455

closes odoo/odoo#150257

X-original-commit: e321fe3a40dd470095c79e7abcd273d6fa0cfe7c
Related: odoo/enterprise#54752
Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
---
 .../src/core/file_viewer/file_viewer.xml      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/addons/web/static/src/core/file_viewer/file_viewer.xml b/addons/web/static/src/core/file_viewer/file_viewer.xml
index 00590ba022f..12b0f409363 100644
--- a/addons/web/static/src/core/file_viewer/file_viewer.xml
+++ b/addons/web/static/src/core/file_viewer/file_viewer.xml
@@ -4,7 +4,7 @@
     <t t-name="web.FileViewer">
         <div class="d-flex justify-content-center" t-att-class="{ 'modal fixed-top bottom-0': props.modal }">
             <div class="o-FileViewer flex-column align-items-center d-flex w-100 h-100" tabindex="0" t-ref="autofocus" t-on-keydown.stop="(ev) => this.onKeydown(ev)">
-                <div class="o-FileViewer-header position-absolute top-0 d-flex w-100 bg-black-75 text-400">
+                <div class="o-FileViewer-header position-absolute top-0 d-flex w-100 bg-black-75 text-400" t-on-click.stop="">
                     <div t-if="isViewable" class="d-flex align-items-center ms-4 me-2">
                         <i t-if="state.file.isImage" class="fa fa-picture-o" role="img" title="Image"/>
                         <i t-if="state.file.isPdf" class="fa fa-file-text" role="img" title="PDF file"/>
@@ -15,7 +15,7 @@
                         <span class="text-truncate" t-out="state.file.displayName"/>
                     </div>
                     <div class="flex-grow-1"/>
-                    <div class="o-FileViewer-download o-FileViewer-headerButton d-flex align-items-center px-3 cursor-pointer" role="button" title="Download">
+                    <div class="o-FileViewer-download o-FileViewer-headerButton d-flex align-items-center px-3 cursor-pointer" role="button" title="Download" t-on-click.stop="">
                         <a t-att-href="state.file.downloadUrl" class="text-reset" download="">
                             <i class="fa fa-download fa-fw" role="img"/>
                             <span>Download</span>
@@ -41,32 +41,32 @@
                     </video>
                 </div>
                 <div t-if="state.file.isImage" class="position-absolute bottom-0 d-flex" role="toolbar">
-                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="zoomIn" title="Zoom In (+)" role="button">
+                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="zoomIn" title="Zoom In (+)" role="button">
                         <i class="fa fa-fw fa-plus" role="img"/>
                     </div>
-                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === 1 }" t-on-click="resetZoom" role="button" title="Reset Zoom (0)">
+                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === 1 }" t-on-click.stop="resetZoom" role="button" title="Reset Zoom (0)">
                         <i class="fa fa-fw fa-search" role="img"/>
                     </div>
-                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === minScale }" t-on-click="zoomOut" title="Zoom Out (-)" role="button">
+                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-att-class="{ 'o_disabled opacity-50': state.scale === minScale }" t-on-click.stop="zoomOut" title="Zoom Out (-)" role="button">
                         <i class="fa fa-fw fa-minus" role="img"/>
                     </div>
-                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="rotate" title="Rotate (r)" role="button">
+                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="rotate" title="Rotate (r)" role="button">
                         <i class="fa fa-fw fa-repeat" role="img"/>
                     </div>
-                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click="onClickPrint" title="Print" role="button">
+                    <div class="o-FileViewer-toolbarButton p-3 rounded-0" t-on-click.stop="onClickPrint" title="Print" role="button">
                         <i class="fa fa-fw fa-print" role="img"/>
                     </div>
-                    <div class="o-FileViewer-download o-FileViewer-toolbarButton p-3 rounded-0 cursor-pointer" title="Download" role="button">
+                    <div class="o-FileViewer-download o-FileViewer-toolbarButton p-3 rounded-0 cursor-pointer" title="Download" role="button" t-on-click.stop="">
                         <a t-att-href="state.file.downloadUrl" class="text-reset" download="">
                             <i class="fa fa-download fa-fw" role="img"/>
                         </a>
                     </div>
                 </div>
                 <t t-if="props.files.length > 1">
-                    <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click="previous" title="Previous (Left-Arrow)" aria-label="Previous" role="button">
+                    <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 start-0 align-items-center justify-content-center d-flex my-auto ms-3 rounded-circle" t-on-click.stop="previous" title="Previous (Left-Arrow)" aria-label="Previous" role="button">
                         <span class="oi oi-chevron-left" role="img"/>
                     </div>
-                    <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click="next" title="Next (Right-Arrow)" aria-label="Next" role="button">
+                    <div class="o-FileViewer-navigation position-absolute top-0 bottom-0 end-0 align-items-center justify-content-center d-flex my-auto me-3 rounded-circle" t-on-click.stop="next" title="Next (Right-Arrow)" aria-label="Next" role="button">
                         <span class="oi oi-chevron-right" role="img"/>
                     </div>
                 </t>