From a609b3cd7af6f05b06ee3bda9436a05acf9747fc Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 4 Dec 2024 00:24:08 -0800
Subject: [PATCH] chore: Set modal as the selected widget when clicked (#11363)

---
 frontend/src/AppBuilder/Widgets/Modal.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/Widgets/Modal.jsx b/frontend/src/AppBuilder/Widgets/Modal.jsx
index a88aff630f..3988e26a50 100644
--- a/frontend/src/AppBuilder/Widgets/Modal.jsx
+++ b/frontend/src/AppBuilder/Widgets/Modal.jsx
@@ -290,8 +290,19 @@ const Component = ({ children, ...restProps }) => {
   } = restProps['modalProps'];
 
   const setSelectedComponentAsModal = useStore((state) => state.setSelectedComponentAsModal, shallow);
+
+  // When the modal body is clicked capture it and use the callback to set the selected component as modal
+  const handleModalBodyClick = (event) => {
+    const clickedComponentId = event.target.getAttribute('component-id');
+
+    // Check if the clicked element is part of the modal canvas & same widget with id
+    if (id === clickedComponentId) {
+      setSelectedComponentAsModal(id);
+    }
+  };
+
   return (
-    <BootstrapModal {...restProps}>
+    <BootstrapModal {...restProps} onClick={handleModalBodyClick}>
       {showConfigHandler && (
         <ConfigHandle
           id={id}