From c2e7116a6b522c245e60b3e323fe1fb9ee2f6ee1 Mon Sep 17 00:00:00 2001
From: Sayan4444 <112304873+Sayan4444@users.noreply.github.com>
Date: Tue, 2 Jan 2024 21:19:25 +0530
Subject: [PATCH] fix: close image gallery on backdrop click (#31344)

---
 .../client/components/ImageGallery/ImageGallery.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
index 0675532432aa..ebce7d42e541 100644
--- a/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
+++ b/apps/meteor/client/components/ImageGallery/ImageGallery.tsx
@@ -109,10 +109,10 @@ const ImageGallery = () => {
 	return createPortal(
 		<FocusScope contain restoreFocus autoFocus>
 			<Box className={swiperStyle}>
-				<div className='swiper-container'>
+				<div className='swiper-container' onClick={onClose}>
 					<IconButton icon='cross' aria-label='Close gallery' className='rcx-swiper-close-button' onClick={onClose} />
-					<IconButton icon='chevron-right' className='rcx-swiper-prev-button' />
-					<IconButton icon='chevron-left' className='rcx-swiper-next-button' />
+					<IconButton icon='chevron-right' className='rcx-swiper-prev-button' onClick={(e) => e.stopPropagation()} />
+					<IconButton icon='chevron-left' className='rcx-swiper-next-button' onClick={(e) => e.stopPropagation()} />
 					<Swiper
 						ref={swiperRef}
 						navigation={{
@@ -131,7 +131,7 @@ const ImageGallery = () => {
 						{images?.map(({ _id, url }) => (
 							<SwiperSlide key={_id}>
 								<div className='swiper-zoom-container'>
-									<img src={url} loading='lazy' />
+									<img src={url} loading='lazy' onClick={(e) => e.stopPropagation()} />
 									<div className='rcx-lazy-preloader'>
 										<Throbber inheritColor />
 									</div>