Merge pull request #1603 from plone/querystring-select2-fix

`pat-querystring`: fix issue with the new select2 native events

Author: petschki

src/pat/querystring/querystring.js

@@ -111,9 +111,15 @@ Criteria.prototype = {
             width: self.options.indexWidth,
             placeholder: _t("Select criteria"),
         });
-        self.$index.on("change", function (e) {
+        self.$index.on("change", function () {
+            // Read the value from the element rather than from the event's
+            // `val` property. Select2 v3 fires a jQuery `change` event carrying
+            // a `val` property, but pat-select2 also re-dispatches a native
+            // `change` event (for native listeners), which jQuery's `change`
+            // handler catches as well. On that second invocation `e.val` would
+            // be undefined. Reading `self.$index.val()` is correct in both cases.
             self.removeValue();
-            self.createOperator(e.val);
+            self.createOperator(self.$index.val());
             self.createClear();
             self.trigger("index-changed");
         });

src/pat/querystring/querystring.test.js

@@ -169,4 +169,41 @@ describe("Querystring", function () {
         global.fetch.mockClear();
         delete global.fetch;
     });
+
+    it("handles a native change event on the index select", async function () {
+        // Regression test: pat-select2 re-dispatches a native `change` event in
+        // addition to the Select2 v3 jQuery `change` event. jQuery's `change`
+        // handler catches both, so the index handler fires twice — once with
+        // `e.val` set (Select2) and once with `e.val` undefined (native event).
+        // The handler must read the value from the element, not from `e.val`,
+        // otherwise the native invocation passes `undefined` to createOperator
+        // and throws.
+        const criterias = await import("./test-querystringcriteria.json");
+        global.fetch = jest.fn().mockImplementation(mockFetch(criterias));
+
+        registry.scan(document.body);
+        await utils.timeout(1);
+
+        // The last criteria row is the empty one a user fills in.
+        const indexSelects = document.querySelectorAll(
+            ".querystring-criteria-index select"
+        );
+        const $index = $(indexSelects[indexSelects.length - 1]);
+        const wrapper = $index.parents(".querystring-criteria-wrapper")[0];
+
+        // Pick a value and fire ONLY a native change event (no Select2 `val`).
+        $index.val("Title");
+        $index[0].dispatchEvent(new Event("change", { bubbles: true }));
+        await utils.timeout(1);
+
+        // The operator select must have been built for the selected index.
+        const operator = wrapper.querySelector(
+            ".querystring-criteria-operator select"
+        );
+        expect(operator).not.toBeNull();
+        expect(operator.options.length).toBeGreaterThan(0);
+
+        global.fetch.mockClear();
+        delete global.fetch;
+    });
 });