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

If a dependend field is required but not shown, remove the required attribute
Restore it once the dependend field is shown.

Author: thet

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_input(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>