From bb49ceee68ec49a431f86f0c04327a67c14c7566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Mar=C3=ADn=20S=C3=A1nchez?=
 <46426271+fermarinsanchez@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:23:42 +0200
Subject: [PATCH] fix(components): add stopPropagation to zoom buttons

Ticket: issue/MainLibrary-153
Reviewed-by: @MIGUELez11
Refs: #148
---
 .../components/src/overlay/ModalZoom/ModalZoom.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/overlay/ModalZoom/ModalZoom.js b/packages/components/src/overlay/ModalZoom/ModalZoom.js
index e859113b9..3247871df 100644
--- a/packages/components/src/overlay/ModalZoom/ModalZoom.js
+++ b/packages/components/src/overlay/ModalZoom/ModalZoom.js
@@ -19,7 +19,6 @@ const ModalZoom = ({ children, canPlay, opened, hideButton, onClose = noop, styl
       center.current?.call();
     }
   }, [opened]);
-
   return (
     <>
       {!hideButton && (
@@ -58,10 +57,20 @@ const ModalZoom = ({ children, canPlay, opened, hideButton, onClose = noop, styl
                 return (
                   <React.Fragment>
                     <Box className={classes.tools}>
-                      <Box onClick={() => zoomIn()}>
+                      <Box
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          zoomIn();
+                        }}
+                      >
                         <ZoomInIcon />
                       </Box>
-                      <Box onClick={() => zoomOut()}>
+                      <Box
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          zoomOut();
+                        }}
+                      >
                         <ZoomOutIcon />
                       </Box>
                     </Box>