Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
## 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts
View File

@ -4,9 +4,9 @@ import { getAllDetachedWidgetIds, getWidgetsMeta } from "sagas/selectors";
const getCurrentlyOpenWidgets = memoize( const getCurrentlyOpenWidgets = memoize(
(allExistingDetachedWidgets: string[], metaWidgets: Record<string, any>) => { (allExistingDetachedWidgets: string[], metaWidgets: Record<string, any>) => {
return allExistingDetachedWidgets.filter((modalId) => { return allExistingDetachedWidgets.filter((detachedWidgetId) => {
const modal = metaWidgets[modalId]; const detachedWidget = metaWidgets[detachedWidgetId];
return modal && modal.isVisible; return detachedWidget && detachedWidget.isVisible;
}); });
}, },
); );

40
app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx
View File

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