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}