Fixed modal closing issue & select widgets inside modal (#5832)

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"

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 }}

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 = () => {