From ab1fc8f2311fd252146942c7a947ebc96efd054f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 22 Jan 2021 12:48:47 -0500
Subject: [PATCH] fix(react): add improved method for not unmounting component
 until overlay is dismissed (#22813)

resolves #22761
---
 .../src/components/createOverlayComponent.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx
index 45e767c55f..7cd3c83498 100644
--- a/packages/react/src/components/createOverlayComponent.tsx
+++ b/packages/react/src/components/createOverlayComponent.tsx
@@ -35,6 +35,8 @@ export const createOverlayComponent = <
       forwardedRef?: React.RefObject<OverlayType>;
     };
 
+  let isDismissing = false;
+
   class Overlay extends React.Component<Props> {
     overlay?: OverlayType;
     el!: HTMLDivElement;
@@ -72,6 +74,15 @@ 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;
+      }
+
+      return true;
+    }
+
     async componentDidUpdate(prevProps: Props) {
       if (this.overlay) {
         attachProps(this.overlay, this.props, prevProps);
@@ -82,6 +93,7 @@ export const createOverlayComponent = <
       }
       if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
         await this.overlay.dismiss();
+        isDismissing = false;
       }
     }
 
@@ -123,7 +135,12 @@ export const createOverlayComponent = <
     }
 
     render() {
-      return ReactDOM.createPortal(this.props.children, this.el);
+      /**
+       * Continue to render the component even when
+       * 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);
     }
   }