fix: Anvil: Fix the delay in closure of modal widget name component on modal close (#33705)

## 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"

### 🔍 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
This commit is contained in:
Abhinav Jha 2024-05-24 13:07:44 +05:30 committed by GitHub
parent b6c506dea5
commit 75bd4292ea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 22 deletions

View File

@ -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;
});
},
);

View File

@ -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>
);
}