From 75bd4292eac2d4333316b35ee286a8242330334c Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Fri, 24 May 2024 13:07:44 +0530
Subject: [PATCH] fix: Anvil: Fix the delay in closure of modal widget name
 component on modal close (#33705)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Closing the modal widget name component was delayed due to the fact that
the DOM node that the widget name component used as a reference, was
still available even after the modal wasn't visible on the Canvas.
This was due to the floating-ui taking time to remove the DOM node.

As a fix, I've made react remove the DOM node when the state for the
modal visibility is set to `false`.

Now, the widget name component closes as soon as it discovers that the
reference is hidden.

Additional fix: Changed the detached widget hook functions to be
agnostic of the term "modal".

Fixes #33381

## Automation

/ok-to-test tags="@tag.Anvil"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9219824326>
> Commit: 3f3f6262983a1a860bba8873d9284cfa5b1a2d12
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9219824326&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->






## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
---
 .../anvil/integrations/modalSelectors.ts      |  6 +--
 .../wds/WDSModalWidget/widget/index.tsx       | 40 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts b/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts
index 6b9b20000e..a222da0b0a 100644
--- 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
index 1636b7c7fc..08bb6bd17f 100644
--- 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>
     );
   }