Restore long-lost form-handling ability to modal.js interactivity in modal dialog

Author: jrochkind

app/assets/builds/blacklight.css

@@ -205,8 +205,6 @@ main {
 
 .bookmark-toggle {
   --bl-icon-color: var(--bs-primary);
-  /* override for line 21.
-      Creates weird spacing in toolbar when min-width is set to 8rem */
 }
 .no-js .bookmark-toggle input[type=submit] {
   display: inline;
@@ -239,6 +237,10 @@ main {
 .bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-unchecked {
   display: none;
 }
+.bookmark-toggle {
+  /* override for line 21.
+      Creates weird spacing in toolbar when min-width is set to 8rem */
+}
 .bookmark-toggle .header-tools .toggle-bookmark-label {
   min-width: 2rem;
 }
@@ -371,13 +373,13 @@ main {
   float: left;
 }
 
+.facet-field-heading a {
+  color: inherit;
+}
 .facet-field-heading {
   /* This prevents the contained stretch link from covering the panel body */
   position: relative;
 }
-.facet-field-heading a {
-  color: inherit;
-}
 
 /* Pivot Facets
 -------------------------------------------------- */

app/javascript/blacklight-frontend/modal.js

@@ -62,6 +62,7 @@ const Modal = (() => {
   // Trigger selectors identify forms or hyperlinks that should open
   // inside a modal dialog.
   modal.triggerLinkSelector  = 'a[data-blacklight-modal~=trigger]';
+  modal.triggerformSelector  = 'form[data-blacklight-modal~=trigger]';
 
   // preserve selectors identify forms or hyperlinks that, if activated already
   // inside a modal dialog, should have destinations remain inside the modal -- but
@@ -71,6 +72,7 @@ const Modal = (() => {
   // be preserved. MUST be manually prefixed with the modal selector,
   // so they only apply to things inside a modal.
   modal.preserveLinkSelector = modal.modalSelector + ' a[data-blacklight-modal~=preserve]';
+  modal.preserveFormSelector = modal.modalSelector + ' form[data-blacklight-modal~=preserve]';
 
   modal.containerSelector    = '[data-blacklight-modal~=container]';
 
@@ -145,6 +147,35 @@ const Modal = (() => {
       .catch(error => modal.onFailure(error))
   };
 
+  modal.modalAjaxFormSubmit = function(e) {
+    e.preventDefault();
+
+    const closest = e.target.closest(`${modal.triggerFormSelector}, ${modal.preserveFormSelector}`);
+
+    const method = (closest.getAttribute("method") || "GET").toUpperCase();
+    const formData = new FormData(closest);
+    const formAction = closest.getAttribute('action');
+
+    const href = (method == "GET") ? `${ formAction }?${ new URLSearchParams(formData).toString() }` : formAction;
+    const fetchArgs = {
+      headers: { 'X-Requested-With': 'XMLHttpRequest' }
+    }
+    if (method != "GET") {
+      fetchArgs.body = formData;
+      fetchArgs.method = method;
+    }
+
+    fetch(href, fetchArgs)
+      .then(response => {
+         if (!response.ok) {
+           throw new TypeError("Request failed");
+         }
+         return response.text();
+       })
+      .then(data => modal.receiveAjax(data))
+      .catch(error => modal.onFailure(error));
+  }
+
   modal.setupModal = function() {
     // Register several click handlers in ONE event handler for efficiency
     //
@@ -154,8 +185,16 @@ const Modal = (() => {
     document.addEventListener('click', (e) => {
       if (e.target.closest(`${modal.triggerLinkSelector}, ${modal.preserveLinkSelector}`))
         modal.modalAjaxLinkClick(e)
-      else if (e.target.matches(`${modal.modalSelector}`) || e.target.closest('[data-bl-dismiss="modal"]'))
+      else if (e.target.matches(`${modal.modalSelector}`) || e.target.closest('[data-bl-dismiss="modal"]')) {
+        e.preventDefault()
         modal.hide()
+      }
+    })
+
+    document.addEventListener('submit', (e) => {
+      if (e.target.closest(`${modal.triggerFormSelector}, ${modal.preserveFormSelector}`)) {
+        modal.modalAjaxFormSubmit(e)
+      }
     })
 
     // Make sure user-agent dismissal of html 'dialog', etc `esc` key, triggers