From 732f8e10ce604f1a3e98518ae9c3a4afd7803e9a Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Tue, 14 Dec 2021 13:21:33 -0600
Subject: [PATCH] fix(modal): fix timing issue when rapidly closing and opening
 controller modal (#24380)

---
 core/src/components/modal/modal.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 1d1531763f..fd4d89c1e8 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -494,7 +494,20 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     if (dismissed) {
       const { delegate } = this.getDelegate();
-      await detachComponent(delegate, this.usersElement);
+
+      /**
+       * If the modal is presented through a controller, we don't need to detach
+       * since the el was already removed during the `dismiss` call above. Skipping
+       * this step also prevents an issue where rapdily dismissing right after
+       * presenting could cause `detachComponent` to be called after the present
+       * finished, blanking out the newly opened modal.
+       *
+       * TODO(FW-423) try and find a way to resolve the race condition directly
+       */
+      if (this.inline) {
+        await detachComponent(delegate, this.usersElement);
+      }
+
       if (this.animation) {
         this.animation.destroy();
       }
@@ -507,7 +520,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     this.currentTransition = undefined;
     this.animation = undefined;
-
     return dismissed;
   }