Fix the delay in closure of modal widget name compnent on modal close

appsmithorg · May 23, 2024 · 3f3f626 · 3f3f626
1 parent 0192b38
commit 3f3f626
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts b/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts
@@ -4,9 +4,9 @@ import { getAllDetachedWidgetIds, getWidgetsMeta } from "sagas/selectors";
 
 const getCurrentlyOpenWidgets = memoize(
   (allExistingDetachedWidgets: string[], metaWidgets: Record<string, any>) => {
-    return allExistingDetachedWidgets.filter((modalId) => {
-      const modal = metaWidgets[modalId];
-      return modal && modal.isVisible;
+    return allExistingDetachedWidgets.filter((detachedWidgetId) => {
+      const detachedWidget = metaWidgets[detachedWidgetId];
+      return detachedWidget && detachedWidget.isVisible;
     });
   },
 );

diff --git a/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx
@@ -137,25 +137,27 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         setOpen={(val) => this.setState({ isVisible: val })}
         size={this.props.size}
       >
-        <ModalContent className={contentClassName.trim()}>
-          {this.props.showHeader && (
-            <ModalHeader
-              excludeFromTabOrder={!this.props.allowWidgetInteraction}
-              title={this.props.title}
-            />
-          )}
-          <ModalBody className={WDS_MODAL_WIDGET_CLASSNAME}>
-            <ModalLayoutProvider {...this.props} />
-          </ModalBody>
-          {this.props.showFooter && (
-            <ModalFooter
-              closeText={closeText}
-              excludeFromTabOrder={!this.props.allowWidgetInteraction}
-              onSubmit={submitText ? this.onSubmitClick : undefined}
-              submitText={submitText}
-            />
-          )}
-        </ModalContent>
+        {this.state.isVisible && (
+          <ModalContent className={contentClassName.trim()}>
+            {this.props.showHeader && (
+              <ModalHeader
+                excludeFromTabOrder={!this.props.allowWidgetInteraction}
+                title={this.props.title}
+              />
+            )}
+            <ModalBody className={WDS_MODAL_WIDGET_CLASSNAME}>
+              <ModalLayoutProvider {...this.props} />
+            </ModalBody>
+            {this.props.showFooter && (
+              <ModalFooter
+                closeText={closeText}
+                excludeFromTabOrder={!this.props.allowWidgetInteraction}
+                onSubmit={submitText ? this.onSubmitClick : undefined}
+                submitText={submitText}
+              />
+            )}
+          </ModalContent>
+        )}
       </Modal>
     );
   }