From 7fe6f3fe89e49aa47e0367a272f672b98284d6dc Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 17 Oct 2023 15:18:58 +1100
Subject: [PATCH] Disable form elements in a disabled-section

I chose to use the 'elements' collection rather than choosing which elements to include (ie this supports inputs, textareas, buttons and anything else I didn't think of). It could be a bit simpler if we assume the element is a form. Even simpler if it's a fieldset (that has a disabled property). But I didn't want to limit it too much.

Unfortunately JS is quite ugly compared to Ruby. And 'prettier' made it uglier in my opinion.
---
 app/webpacker/controllers/bulk_form_controller.js    |  8 ++++++++
 .../stimulus/bulk_form_controller_test.js            | 12 ++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/controllers/bulk_form_controller.js b/app/webpacker/controllers/bulk_form_controller.js
index 14680ff4bd..ab93978584 100644
--- a/app/webpacker/controllers/bulk_form_controller.js
+++ b/app/webpacker/controllers/bulk_form_controller.js
@@ -88,6 +88,14 @@ export default class BulkFormController extends Controller {
 
     this.disableElements.forEach((element) => {
       element.classList.toggle("disabled-section", disable);
+
+      // Also disable any form elements
+      let forms = element.tagName == "FORM" ? [element] : element.querySelectorAll("form");
+
+      forms &&
+        forms.forEach((form) =>
+          Array.from(form.elements).forEach((formElement) => (formElement.disabled = disable))
+        );
     });
   }
 
diff --git a/spec/javascripts/stimulus/bulk_form_controller_test.js b/spec/javascripts/stimulus/bulk_form_controller_test.js
index d50dabbaf4..d558e4b37a 100644
--- a/spec/javascripts/stimulus/bulk_form_controller_test.js
+++ b/spec/javascripts/stimulus/bulk_form_controller_test.js
@@ -28,8 +28,8 @@ describe("BulkFormController", () => {
 
     beforeEach(() => {
       document.body.innerHTML = `
-        <div id="disable1"></div>
-        <div id="disable2"></div>
+        <form id="disable1"><input id="disable1_element"></form>
+        <div id="disable2"><form><input id="disable2_element"></form></div>
         <form data-controller="bulk-form" data-bulk-form-disable-selector-value="#disable1,#disable2">
           <div id="actions" data-bulk-form-target="actions" class="hidden"></div>
           <div id="changed_summary" data-bulk-form-target="changedSummary" data-translation-key="changed_summary"></div>
@@ -45,7 +45,9 @@ describe("BulkFormController", () => {
       `;
 
       const disable1 = document.getElementById("disable1");
+      const disable1_element = document.getElementById("disable1_element");
       const disable2 = document.getElementById("disable2");
+      const disable2_element = document.getElementById("disable2_element");
       const actions = document.getElementById("actions");
       const changed_summary = document.getElementById("changed_summary");
       const input1a = document.getElementById("input1a");
@@ -112,7 +114,9 @@ describe("BulkFormController", () => {
         expect(actions.classList).not.toContain('hidden');
         expect(changed_summary.textContent).toBe('changed_summary, {"count":1}');
         expect(disable1.classList).toContain('disabled-section');
+        expect(disable1_element.disabled).toBe(true);
         expect(disable2.classList).toContain('disabled-section');
+        expect(disable2_element.disabled).toBe(true);
 
         // Record 1: Second field changed
         input1b.value = 'updated1b';
@@ -145,7 +149,9 @@ describe("BulkFormController", () => {
         expect(actions.classList).not.toContain('hidden');
         expect(changed_summary.textContent).toBe('changed_summary, {"count":1}');
         expect(disable1.classList).toContain('disabled-section');
+        expect(disable1_element.disabled).toBe(true);
         expect(disable2.classList).toContain('disabled-section');
+        expect(disable2_element.disabled).toBe(true);
 
         // Record 2: Change back to original value
         input2.value = 'initial2';
@@ -154,7 +160,9 @@ describe("BulkFormController", () => {
         expect(actions.classList).toContain('hidden');
         expect(changed_summary.textContent).toBe('changed_summary, {"count":0}');
         expect(disable1.classList).not.toContain('disabled-section');
+        expect(disable1_element.disabled).toBe(false);
         expect(disable2.classList).not.toContain('disabled-section');
+        expect(disable2_element.disabled).toBe(false);
       });
     });
   });