From d292d26fdc6377a18d7a644957797b8361e2b96a Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam
 <50441969+kavinvenkatachalam@users.noreply.github.com>
Date: Fri, 24 Mar 2023 18:57:23 +0530
Subject: [PATCH] Fixed modal closing issue & select widgets inside modal
 (#5832)

---
 frontend/src/Editor/Components/Modal.jsx | 25 ++++++++++++------------
 frontend/src/Editor/DraggableBox.jsx     |  4 ++++
 frontend/src/Editor/Editor.jsx           |  1 -
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index 36319ad96e..7ce2da473c 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -52,24 +52,16 @@ export const Modal = function Modal({
     [setShowModal]
   );
 
-  useEffect(() => {
-    if (exposedVariables.show !== showModal) {
-      setExposedVariable('show', showModal).then(() => fireEvent(showModal ? 'onOpen' : 'onClose'));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showModal]);
-
   useEffect(() => {
     const canShowModal = exposedVariables.show ?? false;
-    if (canShowModal !== showModal) {
-      setShowModal(canShowModal);
-      fireEvent(canShowModal ? 'onOpen' : 'onClose');
-    }
+    setShowModal(exposedVariables.show ?? false);
+    fireEvent(canShowModal ? 'onOpen' : 'onClose');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [exposedVariables.show]);
 
   function hideModal() {
     setShowModal(false);
+    setExposedVariable('show', false).then(() => fireEvent('onClose'));
   }
 
   const customStyles = {
@@ -121,6 +113,7 @@ export const Modal = function Modal({
           onClick={(event) => {
             event.stopPropagation();
             setShowModal(true);
+            setExposedVariable('show', true).then(() => fireEvent('onOpen'));
           }}
         >
           {triggerButtonLabel ?? 'Show Modal'}
@@ -205,7 +198,15 @@ const Component = ({ children, ...restProps }) => {
         <BootstrapModal.Header style={{ ...customStyles.modalHeader }}>
           <BootstrapModal.Title id="contained-modal-title-vcenter">{title}</BootstrapModal.Title>
           {!hideCloseButton && (
-            <span className="cursor-pointer" size="sm" onClick={() => hideModal()}>
+            <span
+              className="cursor-pointer"
+              size="sm"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                hideModal();
+              }}
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="icon icon-tabler icon-tabler-x"
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index 9f86641bba..5aad5d8643 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -211,6 +211,10 @@ export const DraggableBox = function DraggableBox({
           }}
           onMouseLeave={() => onComponentHover?.(false)}
           style={getStyles(isDragging, isSelectedComponent)}
+          onClick={(e) => {
+            e.stopPropagation();
+            setSelectedComponent && setSelectedComponent(id);
+          }}
         >
           <Rnd
             style={{ ...style }}
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 4f5e51a1a1..b3601a903c 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -650,7 +650,6 @@ class EditorComponent extends React.Component {
     this.setState({ isSaving: true, appDefinition: newDefinition, appDefinitionLocalVersion: uuid() }, () => {
       if (!opts.skipAutoSave) this.autoSave();
     });
-    computeComponentState(this, newDefinition.pages[currentPageId]?.components ?? {});
   };
 
   handleInspectorView = () => {