feat(pat auto suggest): Improve pat-validation integration.

Allow pat-validate to check for validity when select2 was interacted with but
no value selected.

Author: thet

src/pat/auto-suggest/auto-suggest.js

@@ -88,7 +88,8 @@ export default Base.extend({
         if (this.el.tagName === "INPUT") {
             config = this.create_input_config(config);
         }
-        this.$el.select2(config);
+        const $sel2 = this.$el.select2(config);
+
         dom.hide(this.el); // hide input, but keep active (e.g. for validation)
 
         this.$el.on("pat-update", (e, data) => {
@@ -101,6 +102,20 @@ export default Base.extend({
             }
         });
 
+        // Allow pat-validate to check for validity when select2 was interacted
+        // with but no value selected.
+        const initiate_empty_check = () => {
+            const val = $sel2.select2("val");
+            if (val?.length === 0) {
+                // catches "" and []
+                // blur the input field so that pat-validate can kick in when
+                // nothing was selected.
+                this.el.dispatchEvent(events.blur_event());
+            }
+        };
+        this.$el.on("select2-close", initiate_empty_check.bind(this));
+        this.$el.on("select2-blur", initiate_empty_check.bind(this));
+
         this.$el.on("change", () => {
             // The jQuery "change" event isn't caught by normal JavaScript
             // event listeners, e.g. in pat-validation.

src/pat/auto-suggest/auto-suggest.test.js

@@ -300,5 +300,66 @@ describe("pat-autosuggest", function () {
 
             expect(spy).toHaveBeenCalled();
         });
+
+        it("4.2 - Works with pat-validate on an empty selection.", async function () {
+            const pattern_validation = (await import("../validation/validation")).default; // prettier-ignore
+
+            document.body.innerHTML = `
+                <form class="pat-validation" data-pat-validation="delay: 0">
+                  <input
+                      name="words"
+                      class="pat-autosuggest"
+                      required
+                      data-pat-autosuggest="words: apple, orange, pear" />
+                </form>
+            `;
+
+            const form = document.querySelector("form");
+            const input = document.querySelector("input");
+
+            new pattern_validation(form);
+            new pattern(input);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // Open the select2 dropdown
+            $(".select2-input").click();
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // Close it without selecting something.
+            $(input).select2("close");
+
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // There should be a error message from pat-validation.
+            expect(form.querySelectorAll("em.warning").length).toBe(1);
+        });
+
+        it("4.3 - Works with pat-validate when empty and focus moves away.", async function () {
+            const pattern_validation = (await import("../validation/validation")).default; // prettier-ignore
+
+            document.body.innerHTML = `
+                <form class="pat-validation" data-pat-validation="delay: 0">
+                  <input
+                      name="words"
+                      class="pat-autosuggest"
+                      required
+                      data-pat-autosuggest="words: apple, orange, pear" />
+                </form>
+            `;
+
+            const form = document.querySelector("form");
+            const input = document.querySelector("input");
+
+            new pattern_validation(form);
+            new pattern(input);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // Move focus away from select2
+            $(".select2-input")[0].dispatchEvent(events.blur_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // There should be a error message from pat-validation.
+            expect(form.querySelectorAll("em.warning").length).toBe(1);
+        });
     });
 });