Merge pull request #1003 from Patternslib/fix-auto-suggest

Fix auto suggest

Author: thet

src/core/events.js

@@ -118,6 +118,20 @@ const input_event = () => {
     });
 };
 
+const mousedown_event = () => {
+    return new Event("mousedown", {
+        bubbles: true,
+        cancelable: true,
+    });
+};
+
+const mouseup_event = () => {
+    return new Event("mouseup", {
+        bubbles: true,
+        cancelable: true,
+    });
+};
+
 const scroll_event = () => {
     return new Event("scroll", {
         bubbles: true,
@@ -140,6 +154,8 @@ export default {
     click_event: click_event,
     change_event: change_event,
     input_event: input_event,
+    mousedown_event: mousedown_event,
+    mouseup_event: mouseup_event,
     scroll_event: scroll_event,
     submit_event: submit_event,
 };

src/core/events.test.js

@@ -123,6 +123,24 @@ describe("core.events tests", () => {
             expect(catched).toBe("outer");
         });
 
+        it("mousedown event", async () => {
+            outer.addEventListener("mousedown", () => {
+                catched = "outer";
+            });
+            inner.dispatchEvent(events.mousedown_event());
+            await utils.timeout(1);
+            expect(catched).toBe("outer");
+        });
+
+        it("mouseup event", async () => {
+            outer.addEventListener("mouseup", () => {
+                catched = "outer";
+            });
+            inner.dispatchEvent(events.mouseup_event());
+            await utils.timeout(1);
+            expect(catched).toBe("outer");
+        });
+
         it("scroll event", async () => {
             outer.addEventListener("scroll", () => {
                 catched = "outer";

src/core/parser.js

@@ -16,7 +16,7 @@ class ArgumentParser {
 
         this.group_pattern = /([a-z][a-z0-9]*)-([A-Z][a-z0-0\-]*)/i;
         this.json_param_pattern = /^\s*\[?\s*{/i;
-        this.named_param_pattern = /^\s*([a-z][a-z0-9\-]*)\s*:(.*)/i;
+        this.named_param_pattern = /^\s*([a-z][a-z0-9\-]*)\s*:(.*)/is;
         this.token_pattern = /((["']).*?(?!\\)\2)|\s*(\S+)\s*/g;
     }
 
@@ -442,7 +442,6 @@ class ArgumentParser {
                 continue;
             }
             const _parse = this._parse.bind(this);
-
             if (data.match(/&&/)) {
                 frame = data.split(/\s*&&\s*/).map(_parse);
             } else {

src/core/parser.test.js

@@ -124,6 +124,32 @@ describe("The Patterns parser", function () {
             done();
         });
 
+        it("allows values to span multiple lines", function (done) {
+            const parser = new ArgumentParser("mypattern");
+            parser.addArgument("jayson");
+            parser.addArgument("ob-ject");
+            const content = document.createElement("div");
+            content.innerHTML = `
+                <div data-pat-mypattern='
+                    jayson: [
+                        {"key1": "value 1"},
+                        {"key2": "value 2"}
+                    ];
+                    ob-ject: {"key3": "value 3"}
+                '>
+                </div>
+            `;
+            const opts = parser.parse(content.querySelector("[data-pat-mypattern]"));
+            const jayson = JSON.parse(opts.jayson);
+            const ob_ject = JSON.parse(opts.obJect);
+            expect(jayson.length).toBe(2);
+            expect(jayson[0].key1).toBe("value 1");
+            expect(jayson[1].key2).toBe("value 2");
+            expect(ob_ject.key3).toBe("value 3");
+
+            done();
+        });
+
         it("does a type casting to the default value's type", function (done) {
             const parser = new ArgumentParser("mypattern");
             parser.addArgument("selector");

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

@@ -102,15 +102,11 @@ export default Base.extend({
             }
         });
 
-        this.$el.on("click", () => {
-            // Work around the situation that a jQuery "change" event,
-            // submitted by select2, isn't caught by pat-validation.
-            // Select2 also triggers a click event, which we will use here to
-            // trigger a standard JS change event.
-            this.el.dispatchEvent(events.change_event());
-            // Also dispatch a ``input`` event for ``input-change-events``
-            // and pat-auto-suggest to pick this up.
-            // TODO: Revisit after ``input-change-events`` is removed.
+        this.$el.on("change", () => {
+            // The jQuery "change" event isn't caught by normal JavaScript
+            // event listeners, e.g. in pat-validation.
+            // Let's re-trigger as input-event, so that pat-validation but also
+            // ``input-change-events`` can pick it up.
             this.el.dispatchEvent(events.input_event());
         });
 

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

@@ -1,4 +1,5 @@
 import $ from "jquery";
+import events from "../../core/events";
 import pattern from "./auto-suggest";
 import utils from "../../core/utils";
 import registry from "../../core/registry";
@@ -95,7 +96,7 @@ describe("pat-autosuggest", function () {
     });
 
     describe("2.1 - Selected items", function () {
-        it("4.1 - can be given custom CSS classes", async function () {
+        it("2.1 - can be given custom CSS classes", async function () {
             testutils.createInputElement({
                 data: 'words: apple,orange,pear; pre-fill: orange; selection-classes: {"orange": ["fruit", "orange"]}',
             });
@@ -180,6 +181,62 @@ describe("pat-autosuggest", function () {
             expect(selected[1].textContent.trim()).toBe("orange");
             expect(input.value).toBe("apple,orange");
         });
+
+        it("2.5 - items can be pre-filled with json.", async function () {
+            // Check if json pre-filled fields do work as expected.
+            // Version 7.0 introduced a problem where at json pre-filled fields
+            // no items could be deleted or added.
+            // Version 7.11 fixes that problem.
+
+            document.body.innerHTML = `
+                <input
+                    type="text"
+                    class="pat-autosuggest"
+                    data-pat-autosuggest='
+                        words-json: [
+                            {"id": "id-apple", "text":"Apple"},
+                            {"id": "id-orange", "text": "Orange"},
+                            {"id": "id-lemon", "text":"Lemon"}
+                        ];
+                        prefill-json: {
+                            "id-orange": "Orange"
+                        };
+                    ' />
+            `;
+
+            const input = document.querySelector("input");
+            new pattern(input);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            let selected = document.querySelectorAll(".select2-search-choice");
+            expect(selected.length).toBe(1);
+            expect(selected[0].textContent.trim()).toBe("Orange");
+            expect(input.value).toBe("id-orange");
+
+            // NOTE: the keyboard event init key ``which`` is deprecated,
+            //       but that's what select2 3.5.1 is expecting.
+            document
+                .querySelector(".select2-input")
+                .dispatchEvent(new KeyboardEvent("keydown", { which: 8 }));
+            // Need to send two times.
+            document
+                .querySelector(".select2-input")
+                .dispatchEvent(new KeyboardEvent("keydown", { which: 8 }));
+
+            selected = document.querySelectorAll(".select2-search-choice");
+            expect(selected.length).toBe(0);
+
+            document.querySelector(".select2-input").click();
+            document.querySelector(".select2-result").dispatchEvent(events.mouseup_event()); // prettier-ignore
+            document.querySelector(".select2-input").click();
+            document.querySelector(".select2-result").dispatchEvent(events.mouseup_event()); // prettier-ignore
+
+            selected = document.querySelectorAll(".select2-search-choice");
+            expect(selected.length).toBe(2);
+            expect(selected[0].textContent.trim()).toBe("Apple");
+            expect(selected[1].textContent.trim()).toBe("Orange");
+            expect(input.value).toBe("id-apple,id-orange");
+        });
     });
 
     describe("3 - Placeholder tests", function () {