Merge pull request #2314 from flarum/as/modal-fix

Frontend Rewrite Followup Modal Fixes

js/src/common/components/Modal.js

@@ -24,7 +24,16 @@ export default class Modal extends Component {
   oncreate(vnode) {
     super.oncreate(vnode);
 
-    this.attrs.onshow(() => this.onready());
+    this.attrs.animateShow(() => this.onready());
+  }
+
+  onbeforeremove() {
+    // If the global modal state currently contains a modal,
+    // we've just opened up a new one, and accordingly,
+    // we don't need to show a hide animation.
+    if (!this.attrs.state.modal) {
+      this.attrs.animateHide();
+    }
   }
 
   view() {
@@ -103,7 +112,7 @@ export default class Modal extends Component {
    * Hide the modal.
    */
   hide() {
-    this.attrs.onhide();
+    this.attrs.state.close();
   }
 
   /**

js/src/common/components/ModalManager.js

@@ -11,17 +11,18 @@ export default class ModalManager extends Component {
 
     return (
       <div className="ModalManager modal fade">
-        {modal ? modal.componentClass.component({ ...modal.attrs, onshow: this.animateShow.bind(this), onhide: this.animateHide.bind(this) }) : ''}
+        {modal
+          ? modal.componentClass.component({
+              ...modal.attrs,
+              animateShow: this.animateShow.bind(this),
+              animateHide: this.animateHide.bind(this),
+              state: this.attrs.state,
+            })
+          : ''}
       </div>
     );
   }
 
-  onupdate() {
-    if (this.$('.Modal') && !this.attrs.state.modal) {
-      this.animateHide();
-    }
-  }
-
   oncreate(vnode) {
     super.oncreate(vnode);
 
@@ -34,6 +35,14 @@ export default class ModalManager extends Component {
   animateShow(readyCallback) {
     const dismissible = !!this.attrs.state.modal.componentClass.isDismissible;
 
+    // If we are opening this modal while another modal is already open,
+    // the shown event will not run, because the modal is already open.
+    // So, we need to manually trigger the readyCallback.
+    if (this.$().hasClass('in')) {
+      readyCallback();
+      return;
+    }
+
     this.$()
       .one('shown.bs.modal', readyCallback)
       .modal({