From b9c0f13228f72c09b48086bf650dab2886861064 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Wed, 29 May 2019 11:05:44 -0400
Subject: [PATCH] Fix modal freezing fix

---
 js/index.js                                    | 11 +++++++++++
 js/mixins/modal.js                             |  8 --------
 templates/components/delete_confirmation.html  |  6 +++---
 templates/components/modal.html                | 18 +++++++++---------
 .../fragments/applications/edit_team.html      |  8 ++------
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/js/index.js b/js/index.js
index 520dea03..2ef29bb8 100644
--- a/js/index.js
+++ b/js/index.js
@@ -89,7 +89,18 @@ const app = new Vue({
       if (data['isOpen']) {
         document.body.className += ' modal-open'
         this.activeModal = data['name']
+
+        var handler = ally.maintain.disabled({
+          filter: `#${this.modalId}`,
+        })
+
+        this.allyHandler = handler
       } else {
+        this.activeModal = null
+        if (this.allyHandler) {
+          this.allyHandler.disengage()
+          this.allyHandler = null
+        }
         document.body.className = document.body.className.replace(
           ' modal-open',
           ''
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
index 1a2fec6c..c3347a6b 100644
--- a/js/mixins/modal.js
+++ b/js/mixins/modal.js
@@ -3,19 +3,11 @@ import ally from 'ally.js'
 export default {
   methods: {
     closeModal: function(name) {
-      this.activeModal = null
       this.$root.$emit('modalOpen', { isOpen: false, name: name })
-      if (this.allyHandler) this.allyHandler.disengage()
     },
 
     openModal: function(name) {
-      this.activeModal = name
       this.$root.$emit('modalOpen', { isOpen: true, name: name })
-      const idSelector = `#${this.modalId}`
-
-      this.allyHandler = ally.maintain.disabled({
-        filter: idSelector,
-      })
     },
 
     // TODO: activeModal should be tracked on the root
diff --git a/templates/components/delete_confirmation.html b/templates/components/delete_confirmation.html
index ac2d250b..c694ce22 100644
--- a/templates/components/delete_confirmation.html
+++ b/templates/components/delete_confirmation.html
@@ -1,13 +1,13 @@
 {% macro DeleteConfirmation(modal_id, delete_text, delete_action, form) %}
-  <delete-confirmation inline-template>
+  <delete-confirmation inline-template name="{{ modal_id }}" key="{{ modal_id }}">
     <div>
       <div class="usa-input">
-        <label for="deleted-text">
+        <label for="{{ modal_id }}-deleted-text">
           <span class="usa-input__help">
             {{ "common.delete_confirm" | translate }}
           </span>
         </label>
-        <input id="deleted-text" v-model="deleteText">
+        <input id="{{ modal_id }}-deleted-text" v-model="deleteText">
       </div>
       <div class="action-group">
         <form method="POST" action="{{ delete_action }}">
diff --git a/templates/components/modal.html b/templates/components/modal.html
index 25772f53..fee30067 100644
--- a/templates/components/modal.html
+++ b/templates/components/modal.html
@@ -6,16 +6,16 @@
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>
-              {{ caller() }}
+            {{ caller() }}
 
-              {% if dismissable %}
-                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
-                  {{ Icon('x') }}
-                  <span>
-                    {{ "common.close" | translate }}
-                  </span>
-                </button>
-              {% endif %}
+            {% if dismissable %}
+              <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+                {{ Icon('x') }}
+                <span>
+                  {{ "common.close" | translate }}
+                </span>
+              </button>
+            {% endif %}
           </div>
         </div>
       </div>
diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html
index 8139e12b..bd4c8d3d 100644
--- a/templates/fragments/applications/edit_team.html
+++ b/templates/fragments/applications/edit_team.html
@@ -82,13 +82,9 @@
             </a>
           {% endif %}
           {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
-            <button
-              type="button"
-              class='usa-button button-danger'
-              v-on:click="openModal('{{ delete_modal_id }}')"
-            >
+            <a class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
               {{ "portfolios.applications.remove_member.button" | translate }}
-            </button>
+            </a>
           {% endif %}
         </div>
       {% endcall %}