Chooser modal - update spinner logic on error

- When errors occur on chooser modal content, find the local progress buttons that are in loading state and update the value
- Stimulus will automatically resolve all DOM changes based on the dynamic value update
- Add unit tests for functionality
- Fixes #10498
- Regression from #9910 & #10062

client/src/controllers/ProgressController.ts

@@ -69,7 +69,7 @@ export class ProgressController extends Controller<HTMLButtonElement> {
         window.cancelSpinner = () => {
           const attr = `data-${identifier}-loading-value`;
 
-          document.querySelectorAll(`[${attr}="true"]`).forEach((element) => {
+          document.querySelectorAll(`[${attr}~="true"]`).forEach((element) => {
             element.removeAttribute(attr);
           });
         };

client/src/includes/chooserModal.js

@@ -25,8 +25,13 @@ const validateCreationForm = (form) => {
     }
   });
   if (hasErrors) {
-    // eslint-disable-next-line no-undef
-    setTimeout(cancelSpinner, 500);
+    setTimeout(() => {
+      // clear any loading state on progress buttons
+      const attr = 'data-w-progress-loading-value';
+      form.querySelectorAll(`[${attr}~="true"]`).forEach((element) => {
+        element.removeAttribute(attr);
+      });
+    }, 500);
   }
   return !hasErrors;
 };

client/src/includes/chooserModal.test.js

@@ -0,0 +1,64 @@
+import { validateCreationForm } from './chooserModal';
+
+jest.useFakeTimers();
+
+describe('chooserModal', () => {
+  describe('validateCreationForm', () => {
+    let form;
+
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <form id="form">
+        <div data-field>
+          <div data-field-errors></div>
+          <input id="input" required type="text" />
+        </div>
+        <button id="button" type="submit" data-controller="w-progress" data-w-progress-loading-value="true">Update</button>
+      </form>
+      `;
+
+      form = document.getElementById('form');
+    });
+
+    afterEach(() => {
+      jest.runAllTimers();
+    });
+
+    it('should update the aria attribute on invalid fields', () => {
+      const input = document.getElementById('input');
+
+      expect(input.getAttribute('aria-invalid')).toBeFalsy();
+
+      validateCreationForm(form);
+
+      expect(input.getAttribute('aria-invalid')).toBeTruthy();
+    });
+
+    it('should append an error message', () => {
+      expect(form.querySelector('.error-message')).toBeFalsy();
+
+      validateCreationForm(form);
+
+      expect(form.querySelector('.error-message').innerHTML).toEqual(
+        'This field is required.',
+      );
+    });
+
+    it('should clear any in progress buttons', () => {
+      const button = document.getElementById('button');
+
+      validateCreationForm(form);
+
+      expect({ ...button.dataset }).toEqual({
+        controller: 'w-progress',
+        wProgressLoadingValue: 'true',
+      });
+
+      jest.runAllTimers();
+
+      expect({ ...button.dataset }).toEqual({
+        controller: 'w-progress',
+      });
+    });
+  });
+});