Handle required attribute on input for PaymentMethod controller

This is done for one reason : do not submit form with required attribute on input that are actually hidden ; this is not handle correctly by browsers.

This idea here is to add/remove the required attribute on each input if the form is visible or not.

app/webpacker/controllers/paymentmethod_controller.js

@@ -3,23 +3,40 @@ export default class extends Controller {
   static targets = ["paymentMethod"];
 
   connect() {
-    this.hideAll();
+    this.selectPaymentMethod();
   }
 
-  selectPaymentMethod(event) {
-    this.hideAll();
-    const paymentMethodContainerId = event.target.dataset.paymentmethodId;
-    const paymentMethodContainer = document.getElementById(
-      paymentMethodContainerId
-    );
-    paymentMethodContainer.style.display = "block";
-  }
-
-  hideAll() {
+  selectPaymentMethod(event = null) {
+    const paymentMethodContainerId = event
+      ? event.target.dataset.paymentmethodId
+      : null;
     Array.from(
       document.getElementsByClassName("paymentmethod-container")
     ).forEach((e) => {
-      e.style.display = "none";
+      if (e.id === paymentMethodContainerId) {
+        e.style.display = "block";
+        this.addRequiredAttributeOnInputIfNeeded(e);
+      } else {
+        e.style.display = "none";
+        this.removeRequiredAttributeOnInput(e);
+      }
+    });
+  }
+
+  removeRequiredAttributeOnInput(container) {
+    Array.from(container.getElementsByTagName("input")).forEach((i) => {
+      if (i.required) {
+        i.dataset.required = i.required;
+        i.required = false;
+      }
+    });
+  }
+
+  addRequiredAttributeOnInputIfNeeded(container) {
+    Array.from(container.getElementsByTagName("input")).forEach((i) => {
+      if (i.dataset.required === "true") {
+        i.required = true;
+      }
     });
   }
 }

spec/javascripts/stimulus/paymentmethod_controller_test.js

@@ -13,16 +13,16 @@ describe("PaymentmethodController", () => {
          <span id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" />
          <span id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" />
          
-         <div class="paymentmethod-container" id="paymentmethod1"></div>
-         <div class="paymentmethod-container" id="paymentmethod2"></div>
-         <div class="paymentmethod-container" id="paymentmethod3"></div>
+         <div class="paymentmethod-container" id="paymentmethod1"><input type="number" required id="input1" /></div>
+         <div class="paymentmethod-container" id="paymentmethod2"><input type="number" required="true" id="input2" /></div>
+         <div class="paymentmethod-container" id="paymentmethod3"><input type="number" id="input3" /></div>
        </div>`;
 
       const application = Application.start();
       application.register("paymentmethod", paymentmethod_controller);
     });
 
-    it("fill the right payment description", () => {
+    it("fill the right payment container", () => {
       const paymentMethod1 = document.getElementById("paymentmethod_1");
       const paymentMethod2 = document.getElementById("paymentmethod_2");
       const paymentMethod3 = document.getElementById("paymentmethod_3");
@@ -45,5 +45,38 @@ describe("PaymentmethodController", () => {
       expect(paymentMethod2Container.style.display).toBe("none");
       expect(paymentMethod3Container.style.display).toBe("block");
     });
+
+    it("handle well the add/remove on 'required' attribute on each input", () => {
+      const paymentMethod1 = document.getElementById("paymentmethod_1");
+      const paymentMethod2 = document.getElementById("paymentmethod_2");
+      const paymentMethod3 = document.getElementById("paymentmethod_3");
+
+      const input1 = document.getElementById("input1");
+      const input2 = document.getElementById("input2");
+      const input3 = document.getElementById("input3");
+
+      paymentMethod1.click();
+      expect(input1.required).toBe(true);
+      expect(input2.dataset.required).toBe("true");
+      expect(input2.required).toBe(false);
+      expect(input3.required).toBe(false);
+
+      paymentMethod2.click();
+      expect(input2.required).toBe(true);
+      expect(input1.dataset.required).toBe("true");
+      expect(input1.required).toBe(false);
+      expect(input3.required).toBe(false);
+
+      paymentMethod3.click();
+      expect(input1.required).toBe(false);
+      expect(input2.required).toBe(false);
+      expect(input3.required).toBe(false);
+
+      paymentMethod1.click();
+      expect(input1.required).toBe(true);
+      expect(input2.dataset.required).toBe("true");
+      expect(input2.required).toBe(false);
+      expect(input3.required).toBe(false);
+    });
   });
 });