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:
parent
b6c506dea5
commit
75bd4292ea
|
|
@ -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;
|
||||
});
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user