Merge pull request #851 from dod-ccpo/modal-freezing

Fix modal freezing fix

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',
           ''

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

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 }}">

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 %}
+            {% if dismissable %}
-                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+              <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
-                  {{ Icon('x') }}
+                {{ Icon('x') }}
-                  <span>
+                <span>
-                    {{ "common.close" | translate }}
+                  {{ "common.close" | translate }}
-                  </span>
+                </span>
-                </button>
+              </button>
-              {% endif %}
+            {% endif %}
           </div>
         </div>
       </div>

templates/fragments/applications/edit_team.html

@@ -82,13 +82,9 @@
             </a>
           {% endif %}
           {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
-            <button
+            <a class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
-              type="button"
-              class='usa-button button-danger'
-              v-on:click="openModal('{{ delete_modal_id }}')"
-            >
               {{ "portfolios.applications.remove_member.button" | translate }}
-            </button>
+            </a>
           {% endif %}
         </div>
       {% endcall %}