feat(core dom): Add find_inputs to find all inputs in a node tree, including the node itself.

Author: thet

src/core/dom.js

@@ -6,6 +6,8 @@ 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 +573,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();
+    });
+});