feat(pat-depends): Support for required fields.

package.json

@@ -86,7 +86,7 @@
     },
     "maintainers": [
         {
-            "name": "Syslab.com GmbH",
+            "name": "syslab.com GmbH",
             "email": "info@syslab.com",
             "url": "http://www.syslab.com"
         },

src/core/dom.js

@@ -6,6 +6,9 @@ const logger = logging.getLogger("core dom");
 const DATA_PREFIX = "__patternslib__data_prefix__";
 const DATA_STYLE_DISPLAY = "__patternslib__style__display";
 
+const INPUT_SELECTOR = "input, select, textarea, button";
+
+
 /**
  * Return an array of DOM nodes.
  *
@@ -571,17 +574,25 @@ const find_form = (el) => {
     const form =
         el.closest(".pat-subform") || // Special Patternslib subform concept has precedence.
         el.form ||
-        el.querySelector("input, select, textarea, button")?.form ||
+        el.querySelector(INPUT_SELECTOR)?.form ||
         el.closest("form");
     return form;
 };
 
+/**
+ * Find any input type.
+ */
+const find_inputs = (el) => {
+    return querySelectorAllAndMe(el, INPUT_SELECTOR);
+};
+
 const dom = {
     toNodeArray: toNodeArray,
     querySelectorAllAndMe: querySelectorAllAndMe,
     wrap: wrap,
     hide: hide,
     show: show,
+    find_inputs: find_inputs,
     find_parents: find_parents,
     find_scoped: find_scoped,
     get_parents: get_parents,

src/core/dom.test.js

@@ -1017,3 +1017,44 @@ describe("find_form", function () {
         expect(dom.find_form(el)).toBe(subform);
     });
 });
+
+describe("find_inputs", () => {
+    it("finds an input within a node structure.", (done) => {
+        const wrapper = document.createElement("div");
+        wrapper.innerHTML = `
+            <p>hello</p>
+            <fieldset>
+                <div>
+                    <input type="text" />
+                </div>
+                <select>
+                    <option>1</option>
+                    <option>2</option>
+                </select>
+                <textarea></textarea>
+            </fieldset>
+            <button>Click me!</button>
+        `;
+        const inputs = dom.find_inputs(wrapper);
+        const input_types = inputs.map((node) => node.nodeName);
+
+        expect(inputs.length).toBe(4);
+        expect(input_types.includes("INPUT")).toBeTruthy();
+        expect(input_types.includes("SELECT")).toBeTruthy();
+        expect(input_types.includes("TEXTAREA")).toBeTruthy();
+        expect(input_types.includes("BUTTON")).toBeTruthy();
+
+        done();
+    });
+
+    it("finds the input on the node itself.", (done) => {
+        const wrapper = document.createElement("input");
+        const inputs = dom.find_inputs(wrapper);
+        const input_types = inputs.map((node) => node.nodeName);
+
+        expect(inputs.length).toBe(1);
+        expect(input_types.includes("INPUT")).toBeTruthy();
+
+        done();
+    });
+});

src/pat/depends/depends.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 import Base from "../../core/base";
+import dom from "../../core/dom";
 import utils from "../../core/utils";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
@@ -34,6 +35,7 @@ export default Base.extend({
         }
 
         let state = handler.evaluate();
+        this.set_input_state(state);
         switch (options.action) {
             case "show":
                 utils.hideOrShow($el, state, options, this.name);
@@ -77,6 +79,28 @@ export default Base.extend({
         }
     },
 
+    set_input_state(enabled) {
+        // If not enabled, remove any `required` attributes on input fields.
+        // Otherwise restore them.
+        const inputs = dom.find_inputs(this.el);
+
+        for (const el of inputs) {
+            if (enabled) {
+                const required = el.dataset.required;
+                if (typeof required !== "undefined") {
+                    el.setAttribute("required", required);
+                    delete el.dataset.required;
+                }
+            } else {
+                const required = el.getAttribute("required", null);
+                if (required !== null) {
+                    el.dataset.required = required;
+                    el.removeAttribute("required");
+                }
+            }
+        }
+    },
+
     async onReset(event) {
         const dependents = $(event.target).data("patDepends.dependents");
         await utils.timeout(50);
@@ -130,6 +154,7 @@ export default Base.extend({
         const $depdendent = $(dependent);
         const state = handler.evaluate();
 
+        this.set_input_state(state);
         switch (options.action) {
             case "show":
                 utils.hideOrShow($depdendent, state, options, this.name);

src/pat/depends/index.html

@@ -45,6 +45,7 @@ <h2>pat-depends with checkboxes, radiobuttons and multiselects</h2>
                         data-pat-autosuggest="words: Smooth Cayenne, Kew, Natal Queen, Singapore Spanish, Paulista, Perolera;
                                               allow-new-words: false; max-selection-size: 1;"
                         type="text"
+                        required
                     />
                 </fieldset>