dependshandler: ok, we need to support multiple inputs, not just one. Alone because of the radio buttons, where many are named the same. Done.

pick bc255bfb6 fixup dependshandler modernize

fixup

Author: thet

src/lib/dependshandler.js

@@ -7,51 +7,60 @@ class DependsHandler {
         this.ast = parser.parse(expression); // TODO: handle parse exceptions here
     }
 
-    _findInput(name) {
+    _findInputs(name) {
+        // In case of radio buttons, there might be multiple inputs.
         // "name" in parentheses, because it can be any value. Common is:
         // `somename:list` for a radio input list.
-        const input = this.context.querySelector(`
+        let inputs = this.context.querySelectorAll(`
             input[name="${name}"],
             select[name="${name}"],
             textarea[name="${name}"],
             button[name="${name}"]
         `);
-        return input || document.querySelector(`#${name}`) || null;
+        if (!inputs.length) {
+            // This should really only find one instance.
+            inputs = document.querySelectorAll(`#${name}`);
+        }
+        return inputs;
     }
 
     _getValue(name) {
-        const input = this._findInput(name);
-        if (!input) {
-            return null;
-        }
+        let inputs = this._findInputs(name);
+
+        inputs = [...inputs].filter((input) => {
+            if (input.type === "radio" && input.checked === false) {
+                return false;
+            }
+            if (input.type === "checkbox" && input.checked === false) {
+                return false;
+            }
+            return true;
+        });
 
-        if (
-            (input.type === "radio" || input.type === "checkbox") &&
-            input.checked === false
-        ) {
+        if (inputs.length === 0) {
             return null;
         }
 
-        return input.value;
+        return inputs[0].value;
     }
 
     getAllInputs() {
         const todo = [this.ast];
-        const inputs = new Set();
+        const all_inputs = new Set();
 
         while (todo.length) {
             const node = todo.shift();
             if (node.input) {
-                const input = this._findInput(node.input);
-                if (input) {
-                    inputs.add(input);
+                const inputs = this._findInputs(node.input);
+                for (const input of inputs) {
+                    all_inputs.add(input);
                 }
             }
             if (node.children && node.children.length) {
                 todo.push.apply(todo, node.children);
             }
         }
-        return [...inputs];
+        return [...all_inputs];
     }
 
     _evaluate(node) {

src/lib/dependshandler.test.js

@@ -29,14 +29,15 @@ describe("pat-dependshandler", function () {
         });
     });
 
-    describe("_findInput", function () {
+    describe("_findInputs", function () {
         it("no input, nothing found", function () {
             document.body.innerHTML = `
                 <div id="lab"></div>
             `;
             const lab = document.getElementById("lab");
             const handler = new DependsHandler(lab, "foo");
-            expect(handler._findInput("foo")).toBe(null);
+
+            expect(handler._findInputs("foo").length).toBe(0);
         });
 
         it("find input by name", function () {
@@ -48,7 +49,9 @@ describe("pat-dependshandler", function () {
             const lab = document.getElementById("lab");
             const foo = document.querySelector("[name=foo]");
             const handler = new DependsHandler(lab, "foo");
-            expect(handler._findInput("foo")).toBe(foo);
+
+            expect(handler._findInputs("foo").length).toBe(1);
+            expect(handler._findInputs("foo")[0]).toBe(foo);
         });
 
         it("find input by id", function () {
@@ -61,7 +64,8 @@ describe("pat-dependshandler", function () {
             const bar = document.getElementById("bar");
             const handler = new DependsHandler(lab, "bar");
 
-            expect(handler._findInput("bar")).toBe(bar);
+            expect(handler._findInputs("bar").length).toBe(1);
+            expect(handler._findInputs("bar")[0]).toBe(bar);
         });
 
         it("Restrict searches to current form", function () {
@@ -76,7 +80,25 @@ describe("pat-dependshandler", function () {
             const foo1 = document.getElementById("foo1");
             const handler = new DependsHandler(lab, "foo");
 
-            expect(handler._findInput("foo")).toBe(foo1);
+            expect(handler._findInputs("foo").length).toBe(1);
+            expect(handler._findInputs("foo")[0]).toBe(foo1);
+        });
+
+        it("find multiple inputs of the same name, e.g. for radio buttons", function () {
+            document.body.innerHTML = `
+                <div id="lab">
+                    <input type="radio" name="foo:list"/>
+                    <input type="radio" name="foo:list"/>
+                    <input type="radio" name="foo:list"/>
+                </div>
+            `;
+            const lab = document.getElementById("lab");
+            const foos = document.querySelectorAll("[name='foo:list']");
+            const handler = new DependsHandler(lab, "foo:list");
+            expect(handler._findInputs("foo:list").length).toBe(3);
+            expect(handler._findInputs("foo:list")[0]).toBe(foos[0]);
+            expect(handler._findInputs("foo:list")[1]).toBe(foos[1]);
+            expect(handler._findInputs("foo:list")[2]).toBe(foos[2]);
         });
     });
 
@@ -128,6 +150,37 @@ describe("pat-dependshandler", function () {
 
             expect(handler._getValue("foo")).toBe("bar");
         });
+
+        it("Returns the value of the checked radio buttons in a list of multiple radio buttons.", function () {
+            document.body.innerHTML = `
+                <div id="lab">
+                    <input type="radio" name="foo:list" value="bar"/>
+                    <input type="radio" name="foo:list" value="baz"/>
+                    <input type="radio" name="foo:list" value="fuzz" checked/>
+                    <input type="radio" name="foo:list" value="nuzz"/>
+                </div>
+            `;
+            const lab = document.getElementById("lab");
+            const handler = new DependsHandler(lab, "foo:list");
+
+            expect(handler._getValue("foo:list")).toBe("fuzz");
+        });
+
+        it("Returns no value in a list of multiple radio buttons of no one is checked.", function () {
+            document.body.innerHTML = `
+                <div id="lab">
+                    <input type="radio" name="foo:list" value="bar"/>
+                    <input type="radio" name="foo:list" value="baz"/>
+                    <input type="radio" name="foo:list" value="fuzz"/>
+                    <input type="radio" name="foo:list" value="nuzz"/>
+                </div>
+            `;
+            const lab = document.getElementById("lab");
+            const handler = new DependsHandler(lab, "foo:list");
+
+            expect(handler._getValue("foo:list")).toBe(null);
+        });
+
     });
 
     describe("getAllInputs", function () {