From 1e13429731c1d4b5200af7f5ca20aff1f3078bfe Mon Sep 17 00:00:00 2001 From: Michael Chen Date: Mon, 13 Sep 2021 12:29:14 -0700 Subject: [PATCH] fix(react): modal now mounts child component independently of other modals (#23903) resolves #23904 --- .../react/src/components/createOverlayComponent.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index d2fc23a329..b942a86939 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -35,12 +35,10 @@ export const createOverlayComponent = < forwardedRef?: React.ForwardedRef; }; - let isDismissing = false; - class Overlay extends React.Component { overlay?: OverlayType; el!: HTMLDivElement; - + isDismissing = false; constructor(props: Props) { super(props); if (typeof document !== 'undefined') { @@ -75,7 +73,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 +89,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 +140,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); } }