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

@@ -24,16 +24,21 @@ 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 && (
+          <div>
+            <Tag
+              key={modal?.key}
+              {...modal.attrs}
+              animateShow={this.animateShow.bind(this)}
+              animateHide={this.animateHide.bind(this)}
+              state={this.attrs.state}
+            />
+          </div>
+        )}
       </div>
     );
   }

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();
   }