From a0eb35e66162a08ffd5842310ffd523f3f3ab29c Mon Sep 17 00:00:00 2001 From: Michael Chen Date: Wed, 8 Sep 2021 15:23:34 -0700 Subject: [PATCH 1/3] Scope isDismissing to instance of Overlay Currently, when Ion components such as `IonModal` are created using the `createOverlayComponent` HOC, the isDismissing flag is scoped to the definition of the class. So in this case, when IonModal gets exported, the isDismissing flag is scoped to the IonModal class definition and not an instance of the IonModal. Consider when you have multiple IonModals controlling different dialogs or whatever. So I believe this `isDismissing` flag should be scoped to the instance of the Overlay class, as if I chose to render 10 IonModals, each should be controlled independently. --- packages/react/src/components/createOverlayComponent.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index d2fc23a329c..daa413f7fa6 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -35,8 +35,6 @@ export const createOverlayComponent = < forwardedRef?: React.ForwardedRef; }; - let isDismissing = false; - class Overlay extends React.Component { overlay?: OverlayType; el!: HTMLDivElement; @@ -47,6 +45,7 @@ export const createOverlayComponent = < this.el = document.createElement('div'); } this.handleDismiss = this.handleDismiss.bind(this); + this.isDismissing = false; } static get displayName() { @@ -75,7 +74,7 @@ export const createOverlayComponent = < shouldComponentUpdate(nextProps: Props) { // Check if the overlay component is about to dismiss if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) { - isDismissing = true; + this.isDismissing = true; } return true; @@ -91,7 +90,7 @@ export const createOverlayComponent = < } if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) { await this.overlay.dismiss(); - isDismissing = false; + this.isDismissing = false; /** * Now that the overlay is dismissed @@ -142,7 +141,7 @@ export const createOverlayComponent = < * overlay is dismissing otherwise component * will be hidden before animation is done. */ - return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el); + return ReactDOM.createPortal(this.props.isOpen || this.isDismissing ? this.props.children : null, this.el); } } From ff484319871ab1ced70e017b2477f15f1695f815 Mon Sep 17 00:00:00 2001 From: Michael Chen Date: Thu, 9 Sep 2021 07:07:54 -0700 Subject: [PATCH 2/3] Update createOverlayComponent.tsx --- packages/react/src/components/createOverlayComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index daa413f7fa6..4bc291eeb2a 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -38,14 +38,14 @@ export const createOverlayComponent = < class Overlay extends React.Component { overlay?: OverlayType; el!: HTMLDivElement; - + isDismissing: boolean = false; + constructor(props: Props) { super(props); if (typeof document !== 'undefined') { this.el = document.createElement('div'); } this.handleDismiss = this.handleDismiss.bind(this); - this.isDismissing = false; } static get displayName() { From 27a2a5cf5a9cbce34ff0d41ac3ac56b1c212b95a Mon Sep 17 00:00:00 2001 From: Michael Chen Date: Thu, 9 Sep 2021 07:26:51 -0700 Subject: [PATCH 3/3] Update createOverlayComponent.tsx --- packages/react/src/components/createOverlayComponent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index 4bc291eeb2a..b942a86939d 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -38,8 +38,7 @@ export const createOverlayComponent = < class Overlay extends React.Component { overlay?: OverlayType; el!: HTMLDivElement; - isDismissing: boolean = false; - + isDismissing = false; constructor(props: Props) { super(props); if (typeof document !== 'undefined') {