From 836fdbdcd25a3deedd8e5ce8164f6b6b25c6b372 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Tue, 26 Mar 2019 06:54:18 -0400
Subject: [PATCH] reset modal state on close for new portfolio member modal

---
 js/components/forms/multi_step_modal_form.js    |  4 ++++
 templates/components/multi_step_modal_form.html | 14 ++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index 7b5e0ebf..8ddac376 100644
--- a/js/components/forms/multi_step_modal_form.js
+++ b/js/components/forms/multi_step_modal_form.js
@@ -34,6 +34,7 @@ export default {
 
   mounted: function() {
     this.$root.$on('field-change', this.handleValidChange)
+    this.$on('modalOpen', this.handleModalOpen)
   },
 
   methods: {
@@ -61,6 +62,9 @@ export default {
       const { name, optional } = event
       this.fields[name] = optional
     },
+    handleModalOpen: function(_bool) {
+      this.step = 0
+    }
   },
 
   computed: {},
diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html
index 5392c6d9..f749dc4b 100644
--- a/templates/components/multi_step_modal_form.html
+++ b/templates/components/multi_step_modal_form.html
@@ -36,12 +36,14 @@
       <form action="{{ form_action }}" method="POST">
         {{ form.csrf_token }}
         {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
-          {% for step in steps %}
-            <div class="modal__form" v-show="step === {{ loop.index0 }}">
-              {{ FormSteps(step_count, loop.index) }}
-              {{ step }}
-            </div>
-          {% endfor %}
+          <div v-if="activeModal === '{{ name }}'">
+            {% for step in steps %}
+              <div class="modal__form" v-show="step === {{ loop.index0 }}">
+                {{ FormSteps(step_count, loop.index) }}
+                {{ step }}
+              </div>
+            {% endfor %}
+          </div>
         {% endcall %}
       </form>
     </div>