From ff3d18eeaefc97a4dadd7e5d636b6775f3c6bfeb Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Tue, 18 Jun 2024 14:57:48 -0400
Subject: [PATCH] trace down the modal unload error and fix it in uswds

---
 src/registrar/assets/js/get-gov.js      | 65 ++++++++++++-------------
 src/registrar/assets/js/uswds-edited.js | 19 +++++---
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 371271c8b..4c4f9a9c6 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -33,6 +33,33 @@ const showElement = (element) => {
   element.classList.remove('display-none');
 };
 
+/**
+ * Helper function that scrolls to an element
+ * @param {string} attributeName - The string "class" or "id"
+ * @param {string} attributeValue - The class or id name
+ */
+function ScrollToElement(attributeName, attributeValue) {
+  let targetEl = null;
+
+  if (attributeName === 'class') {
+    targetEl = document.getElementsByClassName(attributeValue)[0];
+  } else if (attributeName === 'id') {
+    targetEl = document.getElementById(attributeValue);
+  } else {
+    console.log('Error: unknown attribute name provided.');
+    return; // Exit the function if an invalid attributeName is provided
+  }
+
+  if (targetEl) {
+    const rect = targetEl.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    window.scrollTo({
+      top: rect.top + scrollTop,
+      behavior: 'smooth' // Optional: for smooth scrolling
+    });
+  }
+}
+
 /** Makes an element invisible. */
 function makeHidden(el) {
   el.style.position = "absolute";
@@ -895,33 +922,6 @@ function unloadModals() {
   window.modal.off();
 }
 
-/**
- * Helper function that scrolls to an element
- * @param {string} attributeName - The string "class" or "id"
- * @param {string} attributeValue - The class or id name
- */
-function ScrollToElement(attributeName, attributeValue) {
-  let targetEl = null;
-
-  if (attributeName === 'class') {
-    targetEl = document.getElementsByClassName(attributeValue)[0];
-  } else if (attributeName === 'id') {
-    targetEl = document.getElementById(attributeValue);
-  } else {
-    console.log('Error: unknown attribute name provided.');
-    return; // Exit the function if an invalid attributeName is provided
-  }
-
-  if (targetEl) {
-    const rect = targetEl.getBoundingClientRect();
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    window.scrollTo({
-      top: rect.top + scrollTop,
-      behavior: 'smooth' // Optional: for smooth scrolling
-    });
-  }
-}
-
 /**
  * Generalized function to update pagination for a list.
  * @param {string} itemName - The name displayed in the counter
@@ -1469,7 +1469,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     </svg>
                   </button>
                 </div>
-              `
+                `
 
               domainRequestsSectionWrapper.appendChild(modal);
             }
@@ -1507,13 +1507,10 @@ document.addEventListener('DOMContentLoaded', function() {
           modals.forEach(modal => {
             const submitButton = modal.querySelector('.usa-modal__submit');
             const closeButton = modal.querySelector('.usa-modal__close');
-            
-            // Clone the submit button to remove all existing event listeners
-            const newSubmitButton = submitButton.cloneNode(true);
-            submitButton.parentNode.replaceChild(newSubmitButton, submitButton);
 
-            newSubmitButton.addEventListener('click', function() {
-              pk = newSubmitButton.getAttribute('data-pk');
+
+            submitButton.addEventListener('click', function() {
+              pk = submitButton.getAttribute('data-pk');
               // Close the modal to remove the USWDS UI local classes
               closeButton.click();
               // If we're deleting the last item on a page that is not page 1, we'll need to refresh the display to the previous page
diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index e73f3b6c0..f849e944e 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5311,14 +5311,17 @@ const cleanUpModal = baseComponent => {
   const modalID = modalWrapper.getAttribute("id");
   const originalLocationPlaceHolder = document.querySelector(`[data-placeholder-for="${modalID}"]`);
   if (originalLocationPlaceHolder) {
-    for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
-      const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
-      if (attribute.name.startsWith('data-original-')) {
-        // data-original- is 14 long
-        modalContent.setAttribute(attribute.name.substr(14), attribute.value);
-      }
-    }
-    originalLocationPlaceHolder.after(modalContent);
+    // DOTGOV
+    // Why is this line here? It seems to be recreating the original placeholder and then adding a
+    // copy of it after that first placeholder, which is netralizing our call of off()
+    // for (let attributeIndex = 0; attributeIndex < originalLocationPlaceHolder.attributes.length; attributeIndex += 1) {
+    //   const attribute = originalLocationPlaceHolder.attributes[attributeIndex];
+    //   if (attribute.name.startsWith('data-original-')) {
+    //     // data-original- is 14 long
+    //     modalContent.setAttribute(attribute.name.substr(14), attribute.value);
+    //   }
+    // }
+    //originalLocationPlaceHolder.after(modalContent);
     originalLocationPlaceHolder.parentElement.removeChild(originalLocationPlaceHolder);
   }
   modalWrapper.parentElement.removeChild(modalWrapper);