From f6b1d65a5791c5ebe42dcaed22955ad67391d055 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Mon, 27 Dec 2021 18:28:11 -0500
Subject: [PATCH] Fix consecutive shows of same modal with different attrs

We need to specify a unique key for each modal so that the modals are fully destroyed and recreated. For instance, this fixes the signup modal being empty with OAuth register flows.
---
 .../js/src/common/components/ModalManager.tsx   | 17 ++++++++++-------
 .../js/src/common/states/ModalManagerState.ts   |  9 ++++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/framework/core/js/src/common/components/ModalManager.tsx b/framework/core/js/src/common/components/ModalManager.tsx
index d46899eec..8db7e25bf 100644
--- a/framework/core/js/src/common/components/ModalManager.tsx
+++ b/framework/core/js/src/common/components/ModalManager.tsx
@@ -24,16 +24,19 @@ export default class ModalManager extends Component<IModalManagerAttrs> {
 
   view(vnode: Mithril.VnodeDOM<IModalManagerAttrs, this>): Mithril.Children {
     const modal = this.attrs.state.modal;
+    const Tag = modal?.componentClass;
 
     return (
       <div className="ModalManager modal fade">
-        {!!modal &&
-          modal.componentClass.component({
-            ...modal.attrs,
-            animateShow: this.animateShow.bind(this),
-            animateHide: this.animateHide.bind(this),
-            state: this.attrs.state,
-          })}
+        {!!Tag && (
+          <Tag
+            key={modal?.key}
+            {...modal.attrs}
+            animateShow={this.animateShow.bind(this)}
+            animateHide={this.animateHide.bind(this)}
+            state={this.attrs.state}
+          />
+        )}
       </div>
     );
   }
diff --git a/framework/core/js/src/common/states/ModalManagerState.ts b/framework/core/js/src/common/states/ModalManagerState.ts
index 425de5150..30884c5e3 100644
--- a/framework/core/js/src/common/states/ModalManagerState.ts
+++ b/framework/core/js/src/common/states/ModalManagerState.ts
@@ -22,8 +22,15 @@ export default class ModalManagerState {
   modal: null | {
     componentClass: UnsafeModalClass;
     attrs?: Record<string, unknown>;
+    key: number;
   } = null;
 
+  /**
+   * Used to force re-initialization of modals if a modal
+   * is replaced by another of the same type.
+   */
+  private key = 0;
+
   private closeTimeout?: NodeJS.Timeout;
 
   /**
@@ -48,7 +55,7 @@ export default class ModalManagerState {
 
     if (this.closeTimeout) clearTimeout(this.closeTimeout);
 
-    this.modal = { componentClass, attrs };
+    this.modal = { componentClass, attrs, key: this.key++ };
 
     m.redraw.sync();
   }