Detangle the MultiStepModalForm modal-open link from the modal.

In order to place modal forms in other places on the page (so that forms
are not nested) it's necessary to move MultiStepModalForm links out of
the component. They just need to refer to the correct modal.

This PR also makes changes to ensure that the active modal is being
unset everywhere correctly when a modal is closed.

js/components/forms/multi_step_modal_form.js

@@ -9,7 +9,7 @@ import toggler from '../toggler'
 export default {
   name: 'multi-step-modal-form',
 
-  mixins: [FormMixin, Modal],
+  mixins: [FormMixin],
 
   components: {
     toggler,
@@ -38,7 +38,7 @@ export default {
 
   mounted: function() {
     this.$root.$on('field-change', this.handleValidChange)
-    this.$on('modalOpen', this.handleModalOpen)
+    this.$root.$on('modalOpen', this.handleModalOpen)
   },
 
   methods: {

js/mixins/modal.js

@@ -17,8 +17,21 @@ export default {
         filter: idSelector,
       })
     },
+
+    // TODO: activeModal should be tracked on the root
+    handleModalOpen: function(event) {
+      if (!event.isOpen) {
+        this.activeModal = null
+      }
+    },
   },
+
+  mounted: function() {
+    this.$root.$on('modalOpen', this.handleModalOpen)
+  },
+
   data: function() {
+    // TODO: only the root component should know about the activeModal
     return {
       activeModal: null,
       allyHandler: null,