Merge pull request #2326 from cisagov/rjm/delete-request-bug

Fix delete request bug to ensure event listeners are not duplicated

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
@@ -1294,6 +1294,10 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} pageToDisplay - If we're deleting the last item on a page that is not page 1, we'll need to display the previous page
     */
     function deleteDomainRequest(domainRequestPk,pageToDisplay) {
+
+      // Use to debug uswds modal issues
+      //console.log('deleteDomainRequest')
+
       // Get csrf token
       const csrfToken = getCsrfToken();
       // Create FormData object and append the CSRF token
@@ -1348,6 +1352,14 @@ document.addEventListener('DOMContentLoaded', function() {
           const tbody = document.querySelector('.domain-requests__table tbody');
           tbody.innerHTML = '';
 
+          // Unload modals will re-inject the DOM with the initial placeholders to allow for .on() in regular use cases
+          // We do NOT want that as it will cause multiple placeholders and therefore multiple inits on delete,
+          // which will cause bad delete requests to be sent.
+          const preExistingModalPlaceholders = document.querySelectorAll('[data-placeholder-for^="toggle-delete-domain-alert"]');
+          preExistingModalPlaceholders.forEach(element => {
+              element.remove();
+          });
+
           // remove any existing modal elements from the DOM so they can be properly re-initialized
           // after the DOM content changes and there are new delete modal buttons added
           unloadModals();
@@ -1469,7 +1481,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     </svg>
                   </button>
                 </div>
-              `
+                `
 
               domainRequestsSectionWrapper.appendChild(modal);
             }