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 f5049664eb..c745f11fc7 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;
 
@@ -102,7 +110,7 @@ export const Modal = function Modal({
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerProps.mode, parentRef]);
+  }, [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