From a332ba765195fce852f5211ac27a44122539c8b7 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam
 <50441969+kavinvenkatachalam@users.noreply.github.com>
Date: Fri, 14 Apr 2023 17:40:40 +0530
Subject: [PATCH] Release v2.4.5 (#6034)

* Added close modal on clicking outside property

* bump version
---
 .version                                          |  2 +-
 frontend/src/Editor/Components/Modal.jsx          | 15 ++++++++++++---
 frontend/src/Editor/WidgetManager/widgetConfig.js |  4 +++-
 server/.version                                   |  2 +-
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/.version b/.version
index 79a614418f..59aa62c1fa 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-2.4.4
+2.4.5
diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index 7ce2da473c..ea5948248f 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -20,7 +20,15 @@ export const Modal = function Modal({
   dataCy,
 }) {
   const [showModal, setShowModal] = useState(false);
-  const { hideOnEsc, hideCloseButton, hideTitleBar, loadingState, useDefaultButton, triggerButtonLabel } = properties;
+  const {
+    closeOnClickingOutside = false,
+    hideOnEsc,
+    hideCloseButton,
+    hideTitleBar,
+    loadingState,
+    useDefaultButton,
+    triggerButtonLabel,
+  } = properties;
   const {
     headerBackgroundColor,
     headerTextColor,
@@ -87,7 +95,7 @@ export const Modal = function Modal({
   };
 
   useEffect(() => {
-    if (containerProps.mode === 'view') {
+    if (closeOnClickingOutside) {
       const handleClickOutside = (event) => {
         const modalRef = parentRef.current.parentElement.parentElement.parentElement;
 
@@ -101,7 +109,8 @@ export const Modal = function Modal({
         document.removeEventListener('mousedown', handleClickOutside);
       };
     }
-  }, [containerProps.mode, parentRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [closeOnClickingOutside, parentRef]);
 
   return (
     <div className="container" data-disabled={disabledState} data-cy={dataCy}>
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index accec8c3c0..55c17a6990 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -833,7 +833,8 @@ export const widgets = [
       },
       hideTitleBar: { type: 'toggle', displayName: 'Hide title bar' },
       hideCloseButton: { type: 'toggle', displayName: 'Hide close button' },
-      hideOnEsc: { type: 'toggle', displayName: 'Hide on escape' },
+      hideOnEsc: { type: 'toggle', displayName: 'Close on escape key' },
+      closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside' },
 
       size: {
         type: 'select',
@@ -933,6 +934,7 @@ export const widgets = [
         hideTitleBar: { value: '{{false}}' },
         hideCloseButton: { value: '{{false}}' },
         hideOnEsc: { value: '{{true}}' },
+        closeOnClickingOutside: { value: '{{false}}' },
       },
       events: [],
       styles: {
diff --git a/server/.version b/server/.version
index 79a614418f..59aa62c1fa 100644
--- a/server/.version
+++ b/server/.version
@@ -1 +1 @@
-2.4.4
+2.4.5