fix(react): modal now mounts child component independently of other modals (ionic-team#23903)

puopg · web-flow · commit 1e13429731c1 · 2021-09-13T15:29:14.000-04:00
resolves ionic-team#23904
diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx
@@ -35,12 +35,10 @@ export const createOverlayComponent = <
       forwardedRef?: React.ForwardedRef<OverlayType>;
     };
 
-  let isDismissing = false;
-
   class Overlay extends React.Component<Props> {
     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);
     }
   }
 
