From 99e095e0ea80ed80af770f0a03acfff94e94666b Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 23 Oct 2020 10:30:33 +0200
Subject: [PATCH 01/10] Introduce new ``core/dom`` module for DOM manipulation
 and traversing. `core/dom`` includes methods which help transition from
 jQuery to the JavaScript DOM API.

---
 CHANGES.md           | 2 ++
 src/core/dom.js      | 5 +++++
 src/core/dom.test.js | 5 +++++
 3 files changed, 12 insertions(+)
 create mode 100644 src/core/dom.js
 create mode 100644 src/core/dom.test.js

diff --git a/CHANGES.md b/CHANGES.md
index 2ea559542..b321c2e66 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -34,6 +34,8 @@
 -   pat calendar: Store view, date and active categories per URL, allowing to individually customize the calendar per page.
 -   pat tooltip: Use tippy v6 based implementation.
 -   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
+-   Introduce new ``core/dom`` module for DOM manipulation and traversing.
+    ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
 
 ### Technical
 
diff --git a/src/core/dom.js b/src/core/dom.js
new file mode 100644
index 000000000..82381cb42
--- /dev/null
+++ b/src/core/dom.js
@@ -0,0 +1,5 @@
+/* Utilities for DOM traversal or navigation */
+
+const dom = {};
+
+export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
new file mode 100644
index 000000000..7cc1588b3
--- /dev/null
+++ b/src/core/dom.test.js
@@ -0,0 +1,5 @@
+import dom from "./dom";
+
+describe("core.dom tests", () => {
+    // Tests from the core.dom module
+});

From 142b1106f7351c10a31dc4e196a45532ada179bc Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 22 Oct 2020 17:32:13 +0200
Subject: [PATCH 02/10] core dom: Add ``jqToNode`` to return a DOM node if a
 jQuery node was passed.

---
 CHANGES.md           |  1 +
 src/core/dom.js      | 12 +++++++++++-
 src/core/dom.test.js | 13 +++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index b321c2e66..a49829929 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -36,6 +36,7 @@
 -   Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable.
 -   Introduce new ``core/dom`` module for DOM manipulation and traversing.
     ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
+-   core dom: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
 
 ### Technical
 
diff --git a/src/core/dom.js b/src/core/dom.js
index 82381cb42..ed1dee25b 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -1,5 +1,15 @@
 /* Utilities for DOM traversal or navigation */
 
-const dom = {};
+const jqToNode = (el) => {
+    // Return a DOM node if a jQuery node was passed.
+    if (el.jquery) {
+        el = el[0];
+    }
+    return el;
+};
+
+const dom = {
+    jqToNode: jqToNode,
+};
 
 export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
index 7cc1588b3..ab33a7f77 100644
--- a/src/core/dom.test.js
+++ b/src/core/dom.test.js
@@ -1,5 +1,18 @@
+import $ from "jquery";
 import dom from "./dom";
 
 describe("core.dom tests", () => {
     // Tests from the core.dom module
+
+    describe("jqToNode tests", () => {
+        it("always returns a bare DOM node no matter if a jQuery or bare DOM node was passed.", (done) => {
+            const el = document.createElement("div");
+            const $el = $(el);
+
+            expect(dom.jqToNode($el)).toBe(el);
+            expect(dom.jqToNode(el)).toBe(el);
+
+            done();
+        });
+    });
 });

From d7c6f66f6e5aa72bc936c628d5e40f7b12ea60d0 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 23 Oct 2020 10:40:39 +0200
Subject: [PATCH 03/10] core dom: Add ``querySelectorAllAndMe`` to do a
 querySelectorAll including the starter element.

---
 CHANGES.md           |  1 +
 src/core/dom.js      | 14 ++++++++++++++
 src/core/dom.test.js | 27 +++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index a49829929..0c526ef73 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -37,6 +37,7 @@
 -   Introduce new ``core/dom`` module for DOM manipulation and traversing.
     ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
 -   core dom: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
+-   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
 
 ### Technical
 
diff --git a/src/core/dom.js b/src/core/dom.js
index ed1dee25b..40f925d38 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -8,8 +8,22 @@ const jqToNode = (el) => {
     return el;
 };
 
+const querySelectorAllAndMe = (el, selector) => {
+    // Like querySelectorAll but including the element where it starts from.
+    // Returns an Array, not a NodeList
+
+    el = jqToNode(el); // Ensure real DOM node.
+
+    const all = [...el.querySelectorAll(selector)];
+    if (el.matches(selector)) {
+        all.unshift(el); // start element should be first.
+    }
+    return all;
+};
+
 const dom = {
     jqToNode: jqToNode,
+    querySelectorAllAndMe: querySelectorAllAndMe,
 };
 
 export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
index ab33a7f77..58f285546 100644
--- a/src/core/dom.test.js
+++ b/src/core/dom.test.js
@@ -15,4 +15,31 @@ describe("core.dom tests", () => {
             done();
         });
     });
+
+    describe("querySelectorAllAndMe tests", () => {
+        it("return also starting node if query matches.", (done) => {
+            const el = document.createElement("div");
+            el.setAttribute("class", "node1");
+            el.innerHTML = `<span class="node2">hello.</span>`;
+
+            const res1 = dom.querySelectorAllAndMe(el, ".node1");
+            expect(res1.length).toBe(1);
+            expect(res1[0].outerHTML).toBe(
+                `<div class="node1"><span class="node2">hello.</span></div>`
+            );
+
+            const res2 = dom.querySelectorAllAndMe(el, ".node2");
+            expect(res2.length).toBe(1);
+            expect(res2[0].outerHTML).toBe(`<span class="node2">hello.</span>`);
+
+            const res3 = dom.querySelectorAllAndMe(el, "div, span");
+            expect(res3.length).toBe(2);
+            expect(res3[0].outerHTML).toBe(
+                `<div class="node1"><span class="node2">hello.</span></div>`
+            );
+            expect(res3[1].outerHTML).toBe(`<span class="node2">hello.</span>`);
+
+            done();
+        });
+    });
 });

From 7ef7435a98742aea20557af680a83b8670280042 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 23 Oct 2020 10:34:32 +0200
Subject: [PATCH 04/10] core dom: Add ``wrap`` wrap an element with a wrapper
 element.

---
 CHANGES.md           |  1 +
 src/core/dom.js      | 11 +++++++++++
 src/core/dom.test.js | 16 ++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index 0c526ef73..177a9b437 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -38,6 +38,7 @@
     ``core/dom`` includes methods which help transition from jQuery to the JavaScript DOM API.
 -   core dom: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
 -   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
+-   core dom: Add ``wrap`` wrap an element with a wrapper element.
 
 ### Technical
 
diff --git a/src/core/dom.js b/src/core/dom.js
index 40f925d38..fe33c4a54 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -21,9 +21,20 @@ const querySelectorAllAndMe = (el, selector) => {
     return all;
 };
 
+const wrap = (el, wrapper) => {
+    // Wrap a element with a wrapper element.
+    // See: https://stackoverflow.com/a/13169465/1337474
+    el = jqToNode(el); // Ensure real DOM node.
+    wrapper = jqToNode(wrapper); // Ensure real DOM node.
+
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+};
+
 const dom = {
     jqToNode: jqToNode,
     querySelectorAllAndMe: querySelectorAllAndMe,
+    wrap: wrap,
 };
 
 export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
index 58f285546..c803a32c2 100644
--- a/src/core/dom.test.js
+++ b/src/core/dom.test.js
@@ -42,4 +42,20 @@ describe("core.dom tests", () => {
             done();
         });
     });
+
+    describe("wrap tests", () => {
+        it("wraps an element within another element.", (done) => {
+            const parent = document.createElement("main");
+            const el = document.createElement("div");
+            const wrapper = document.createElement("section");
+            parent.appendChild(el);
+
+            dom.wrap(el, wrapper);
+            expect(parent.outerHTML).toBe(
+                `<main><section><div></div></section></main>`
+            );
+
+            done();
+        });
+    });
 });

From 0b8a180416998a7fbb81b3d3f340b879a9a0dd71 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 27 Oct 2020 18:13:42 +0100
Subject: [PATCH 05/10] core dom: Add ``hide`` and ``show`` for DOM elements
 which retain the original display value.

---
 CHANGES.md           |  1 +
 src/core/dom.js      | 26 ++++++++++++++++++++++++
 src/core/dom.test.js | 47 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index 177a9b437..0a2c07977 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -39,6 +39,7 @@
 -   core dom: Add ``jqToNode`` to return a DOM node if a jQuery node was passed.
 -   core dom: Add ``querySelectorAllAndMe`` to do a querySelectorAll including the starter element.
 -   core dom: Add ``wrap`` wrap an element with a wrapper element.
+-   core dom: Add ``hide`` and ``show`` for DOM elements which retain the original display value.
 
 ### Technical
 
diff --git a/src/core/dom.js b/src/core/dom.js
index fe33c4a54..8974b3cd6 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -1,5 +1,7 @@
 /* Utilities for DOM traversal or navigation */
 
+const DATA_STYLE_DISPLAY = "__patternslib__style__display";
+
 const jqToNode = (el) => {
     // Return a DOM node if a jQuery node was passed.
     if (el.jquery) {
@@ -31,10 +33,34 @@ const wrap = (el, wrapper) => {
     wrapper.appendChild(el);
 };
 
+const hide = (el) => {
+    // Hides the element with ``display: none``
+    el = jqToNode(el); // Ensure real DOM node.
+    if (el.style.display === "none") {
+        // Nothing to do.
+        return;
+    }
+    if (el.style.display) {
+        el[DATA_STYLE_DISPLAY] = el.style.display;
+    }
+    el.style.display = "none";
+};
+
+const show = (el) => {
+    // Shows element by removing ``display: none`` and restoring the display
+    // value to whatever it was before.
+    el = jqToNode(el); // Ensure real DOM node.
+    const val = el[DATA_STYLE_DISPLAY] || null;
+    el.style.display = val;
+    delete el[DATA_STYLE_DISPLAY];
+};
+
 const dom = {
     jqToNode: jqToNode,
     querySelectorAllAndMe: querySelectorAllAndMe,
     wrap: wrap,
+    hide: hide,
+    show: show,
 };
 
 export default dom;
diff --git a/src/core/dom.test.js b/src/core/dom.test.js
index c803a32c2..647801097 100644
--- a/src/core/dom.test.js
+++ b/src/core/dom.test.js
@@ -58,4 +58,51 @@ describe("core.dom tests", () => {
             done();
         });
     });
+
+    describe("show/hide tests", () => {
+        it("shows or hides and does keeps the CSS display rule value.", (done) => {
+            const el = document.createElement("div");
+            el.style.borderTop = "2em";
+            el.style.marginTop = "4em";
+
+            dom.hide(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("none");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            dom.show(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBeFalsy();
+            expect(
+                el.getAttribute("style").indexOf("display") === -1
+            ).toBeTruthy();
+
+            el.style.display = "inline";
+            dom.hide(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("none");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            dom.show(el);
+
+            expect(el.style.borderTop).toBe("2em");
+            expect(el.style.marginTop).toBe("4em");
+            expect(el.style.display).toBe("inline");
+            expect(
+                el.getAttribute("style").indexOf("display") >= -1
+            ).toBeTruthy();
+
+            done();
+        });
+    });
 });

From 57d77ae091b7b7e2a337716a18acbd11ed64c916 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 22 Oct 2020 17:32:42 +0200
Subject: [PATCH 06/10] pat-select: Modernize code

---
 src/pat/selectbox/documentation.md |  5 ++
 src/pat/selectbox/index.html       | 44 +++++++++++++++++
 src/pat/selectbox/selectbox.js     | 77 +++++++++++++-----------------
 3 files changed, 81 insertions(+), 45 deletions(-)
 create mode 100644 src/pat/selectbox/documentation.md
 create mode 100644 src/pat/selectbox/index.html

diff --git a/src/pat/selectbox/documentation.md b/src/pat/selectbox/documentation.md
new file mode 100644
index 000000000..02a48091d
--- /dev/null
+++ b/src/pat/selectbox/documentation.md
@@ -0,0 +1,5 @@
+## Description
+
+the __selectbox__ pattern adds ``data-option`` and ``data-option-value`` attributes on the parent element.
+If the parent element is not a ``<label>`` it wrapts itself within a ``<span>`` element.
+
diff --git a/src/pat/selectbox/index.html b/src/pat/selectbox/index.html
new file mode 100644
index 000000000..614722f4d
--- /dev/null
+++ b/src/pat/selectbox/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <title>Selectbox demo</title>
+        <script
+            src="/dist/bundle.js"
+            type="text/javascript"
+            charset="utf-8"
+        ></script>
+    </head>
+    <body>
+
+      <form>
+        <select class="pat-select">
+          <option value="true" selected>Bevat</option>
+          <option value="false">Bevat niet</option>
+        </select>
+
+        <br />
+
+        <label>
+        <select class="pat-select">
+          <option value="okay" selected>okay</option>
+          <option value="nicht okay">nicht okay</option>
+        </select>
+        </label>
+
+        <br />
+
+        <label class="pat-select">
+          <select>
+            <option value="ja" selected>ja.</option>
+            <option value="nein">nein.</option>
+          </select>
+        </label>
+
+        <br />
+
+        <input type="reset"/>
+      </form>
+
+    </body>
+</html>
diff --git a/src/pat/selectbox/selectbox.js b/src/pat/selectbox/selectbox.js
index 324bbb59b..cc876d7e4 100644
--- a/src/pat/selectbox/selectbox.js
+++ b/src/pat/selectbox/selectbox.js
@@ -1,64 +1,51 @@
-/**
- * Patterns selectbox - Expose select option
- * for (un)checking.
- *
- * Copyright 2012-2014 Simplon B.V. - Wichert Akkerman
- * Copyright 2012 JC Brand
- * Copyright 2012-2013 Florian Friesdorf
- */
-
+/* Patterns selectbox - Expose select option for (un)checking. */
 import $ from "jquery";
-import registry from "../../core/registry";
+import Base from "../../core/base";
+import dom from "../../core/dom";
+
+const KEY_RESET = "__patternslib__pat_selectbox__reset";
 
-var selectbox = {
+export default Base.extend({
     name: "selectbox",
     trigger: ".pat-select",
+    all_selects: [],
 
-    init: function ($el) {
-        var $forms = $();
-        $el.each(function () {
-            if (this.form !== null) {
-                var $form = $(this.form);
-                if ($form.data("pat-selectbox.reset")) return;
-                $form.data("pat-selectbox.reset", true);
-                $forms = $forms.add(this.form);
-            }
-        });
+    init(el) {
+        el = dom.jqToNode(el);
 
-        $el.find("select:not([multiple])")
-            .each(function () {
-                var $el = $(this);
-                // create parent span if not direct child of a label
-                if ($el.parent("label").length === 0) $el.wrap("<span />");
-                selectbox.onChangeSelect.call(this);
-            })
-            .on("change.pat-selectbox", selectbox.onChangeSelect);
+        if (el.form && !el[KEY_RESET]) {
+            $(el.form).on("reset.pat-selectbox", () => this.form_reset());
+            el[KEY_RESET] = true;
+        }
 
-        $forms.on("reset.pat-selectbox", selectbox.onFormReset);
+        this.all_selects = el.querySelectorAll("select:not([multiple])");
+        for (const sel of this.all_selects) {
+            // create parent span if not direct child of a label
+            if (!sel.parentNode.matches("label")) {
+                dom.wrap(sel, document.createElement("span"));
+            }
+            this.change_select(sel);
+            $(sel).on("change.pat-selectbox", () => this.change_select(sel));
+        }
     },
 
-    destroy: function ($el) {
+    destroy($el) {
         return $el.off(".pat-selectbox");
     },
 
-    onFormReset: function () {
+    form_reset() {
         // This event is triggered before the form is reset, and we need
         // the post-reset state to update our pattern. Use a small delay
         // to fix this.
-        var form = this;
-        setTimeout(function () {
-            $("select:not([multiple])", form).each(selectbox.onChangeSelect);
+        setTimeout(() => {
+            for (const sel of this.all_selects) {
+                this.change_select(sel);
+            }
         }, 50);
     },
 
-    onChangeSelect: function () {
-        var $select = $(this);
-        $select
-            .parent()
-            .attr("data-option", $select.find("option:selected").text());
-        $select.parent().attr("data-option-value", $select.val());
+    change_select(el) {
+        el.parentNode.setAttribute("data-option", el.querySelector("option:checked").text); // prettier-ignore
+        el.parentNode.setAttribute("data-option-value", el.value);
     },
-};
-
-registry.register(selectbox);
-export default selectbox;
+});

From 94bf225cf751e0d115d61e4c1f1519cef07eb3f6 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 22 Oct 2020 20:02:12 +0200
Subject: [PATCH 07/10] pat select: Add missing ``<span>`` element around the
 select element itself. Fixes:
 https://github.com/quaive/ploneintranet.prototype/issues/1087

---
 CHANGES.md                          |  1 +
 src/pat/selectbox/selectbox.js      |  5 +-
 src/pat/selectbox/selectbox.test.js | 85 +++++++++++++++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/pat/selectbox/selectbox.test.js

diff --git a/CHANGES.md b/CHANGES.md
index 0a2c07977..bec576daa 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -67,6 +67,7 @@
 -   pat calendar: Fix language loading error "Error: Cannot find module './en.js'"
 -   pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes.
 -   pat checklist: Also dispatch standard ``change`` event when de/selecting all items.
+-   pat select: Add missing ``<span>`` element around the select element itself. Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1087
 
 
 ## 3.0.0-dev - unreleased
diff --git a/src/pat/selectbox/selectbox.js b/src/pat/selectbox/selectbox.js
index cc876d7e4..47d3278bf 100644
--- a/src/pat/selectbox/selectbox.js
+++ b/src/pat/selectbox/selectbox.js
@@ -18,7 +18,10 @@ export default Base.extend({
             el[KEY_RESET] = true;
         }
 
-        this.all_selects = el.querySelectorAll("select:not([multiple])");
+        this.all_selects = dom.querySelectorAllAndMe(
+            el,
+            "select:not([multiple])"
+        );
         for (const sel of this.all_selects) {
             // create parent span if not direct child of a label
             if (!sel.parentNode.matches("label")) {
diff --git a/src/pat/selectbox/selectbox.test.js b/src/pat/selectbox/selectbox.test.js
new file mode 100644
index 000000000..194cb6d15
--- /dev/null
+++ b/src/pat/selectbox/selectbox.test.js
@@ -0,0 +1,85 @@
+import Pattern from "./selectbox";
+import registry from "../../core/registry";
+import utils from "../../core/utils";
+
+describe("pat selectbox tests", () => {
+    // Tests from the core.dom module
+
+    it("works as indented.", async (done) => {
+        const el = document.createElement("div");
+        el.innerHTML = `
+          <form>
+            <select class="pat-select sel1">
+              <option value="a" selected>A</option>
+              <option value="b">B</option>
+            </select>
+
+            <label>
+            <select class="pat-select sel2">
+              <option value="c" selected>C</option>
+              <option value="d">D</option>
+            </select>
+            </label>
+
+            <label class="pat-select">
+              <select class="sel3">
+                <option value="e" selected>E</option>
+                <option value="f">F</option>
+              </select>
+            </label>
+
+            <input type="reset"/>
+          </form>
+        `;
+
+        registry.scan(el);
+
+        const sel1 = el.querySelector(".sel1");
+        const sel2 = el.querySelector(".sel2");
+        const sel3 = el.querySelector(".sel3");
+
+        expect(sel1.parentNode.tagName).toBe("SPAN");
+        expect(sel2.parentNode.tagName).toBe("LABEL");
+        expect(sel3.parentNode.tagName).toBe("LABEL");
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("A");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("a");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("C");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("c");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("E");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("e");
+
+        sel1.options["1"].selected = true;
+        sel1.dispatchEvent(new Event("change"));
+        sel2.options["1"].selected = true;
+        sel2.dispatchEvent(new Event("change"));
+        sel3.options["1"].selected = true;
+        sel3.dispatchEvent(new Event("change"));
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("B");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("b");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("D");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("d");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("F");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("f");
+
+        const form = el.querySelector("form");
+        form.reset();
+        await utils.timeout(200); // wait for (timeout in pattern)*3 + a bit
+
+        expect(sel1.parentNode.getAttribute("data-option")).toBe("A");
+        expect(sel1.parentNode.getAttribute("data-option-value")).toBe("a");
+
+        expect(sel2.parentNode.getAttribute("data-option")).toBe("C");
+        expect(sel2.parentNode.getAttribute("data-option-value")).toBe("c");
+
+        expect(sel3.parentNode.getAttribute("data-option")).toBe("E");
+        expect(sel3.parentNode.getAttribute("data-option-value")).toBe("e");
+
+        done();
+    });
+});

From 153dd4c3f5e0ebd95325820c0185f896d57daddd Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 22 Oct 2020 19:56:08 +0200
Subject: [PATCH 08/10] core utils: Modernize hideOrShow

---
 src/core/utils.js | 55 +++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/core/utils.js b/src/core/utils.js
index 67f2a801e..ae606930b 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -1,5 +1,6 @@
 import $ from "jquery";
 import _ from "underscore";
+import dom from "./dom";
 
 $.fn.safeClone = function () {
     var $clone = this.clone();
@@ -278,45 +279,53 @@ function hasValue(el) {
     return false;
 }
 
-const transitions = {
-    none: { hide: "hide", show: "show" },
-    fade: { hide: "fadeOut", show: "fadeIn" },
-    slide: { hide: "slideUp", show: "slideDown" },
-};
+const hideOrShow = (el, visible, options, pattern_name) => {
+    const $el = $(el);
+    el = dom.jqToNode(el); // ensure dom node
+
+    const transitions = {
+        none: { hide: "hide", show: "show" },
+        fade: { hide: "fadeOut", show: "fadeIn" },
+        slide: { hide: "slideUp", show: "slideDown" },
+    };
 
-function hideOrShow($el, visible, options, pattern_name) {
     const duration =
         options.transition === "css" || options.transition === "none"
             ? null
             : options.effect.duration;
 
-    $el.removeClass("visible hidden in-progress");
-    const onComplete = function () {
-        $el.removeClass("in-progress")
-            .addClass(visible ? "visible" : "hidden")
-            .trigger("pat-update", {
-                pattern: pattern_name,
-                transition: "complete",
-            });
+    const on_complete = () => {
+        el.classList.remove("in-progress");
+        el.classList.add(visible ? "visible" : "hidden");
+        $(el).trigger("pat-update", {
+            pattern: pattern_name,
+            transition: "complete",
+        });
     };
-    if (!duration) {
-        if (options.transition !== "css") {
-            $el[visible ? "show" : "hide"]();
-        }
-        onComplete();
-    } else {
+
+    el.classList.remove("visible");
+    el.classList.remove("hidden");
+    el.classList.remove("in-progress");
+
+    if (duration) {
         const t = transitions[options.transition];
-        $el.addClass("in-progress").trigger("pat-update", {
+        el.classList.add("in-progress");
+        $el.trigger("pat-update", {
             pattern: pattern_name,
             transition: "start",
         });
         $el[visible ? t.show : t.hide]({
             duration: duration,
             easing: options.effect.easing,
-            complete: onComplete,
+            complete: on_complete,
         });
+    } else {
+        if (options.transition !== "css") {
+            $el[visible ? "show" : "hide"]();
+        }
+        on_complete();
     }
-}
+};
 
 function addURLQueryParameter(fullURL, param, value) {
     /* Using a positive lookahead (?=\=) to find the given parameter,

From 4b31520cac44884bacc15b6b6ff9347d8a5fa787 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 27 Oct 2020 18:18:13 +0100
Subject: [PATCH 09/10] pat depends/core utils: Do not set inline styles when
 showing elements in transition mode none. Fixes #719.

---
 CHANGES.md             |  1 +
 src/core/utils.js      |  2 +-
 src/core/utils.test.js | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/CHANGES.md b/CHANGES.md
index bec576daa..44a9effbb 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -68,6 +68,7 @@
 -   pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes.
 -   pat checklist: Also dispatch standard ``change`` event when de/selecting all items.
 -   pat select: Add missing ``<span>`` element around the select element itself. Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1087
+-   pat depends/core utils: Do not set inline styles when showing elements in transition mode ``none``. Fixes #719.
 
 
 ## 3.0.0-dev - unreleased
diff --git a/src/core/utils.js b/src/core/utils.js
index ae606930b..23e58dc1a 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -321,7 +321,7 @@ const hideOrShow = (el, visible, options, pattern_name) => {
         });
     } else {
         if (options.transition !== "css") {
-            $el[visible ? "show" : "hide"]();
+            dom[visible ? "show" : "hide"](el);
         }
         on_complete();
     }
diff --git a/src/core/utils.test.js b/src/core/utils.test.js
index 45e81eaf3..fe1e1bd4d 100644
--- a/src/core/utils.test.js
+++ b/src/core/utils.test.js
@@ -427,6 +427,43 @@ describe("hideOrShow", function () {
             "hidden",
         ]);
     });
+
+    it("transition none does not mess up styles", (done) => {
+        const el = document.createElement("div");
+        el.style.borderTop = "2em";
+        el.style.marginTop = "4em";
+
+        utils.hideOrShow(el, false, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("none");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        utils.hideOrShow(el, true, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBeFalsy();
+        expect(el.getAttribute("style").indexOf("display") === -1).toBeTruthy();
+
+        el.style.display = "inline";
+        utils.hideOrShow(el, false, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("none");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        utils.hideOrShow(el, true, { transition: "none" }, "noname");
+
+        expect(el.style.borderTop).toBe("2em");
+        expect(el.style.marginTop).toBe("4em");
+        expect(el.style.display).toBe("inline");
+        expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
+
+        done();
+    });
 });
 
 describe("hasValue", function () {

From d93cad9bfabc0851f669763d224116342472eb09 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 28 Oct 2020 08:55:13 +0100
Subject: [PATCH 10/10] pat depends: Demo pre-selected element triggers
 pat-depends.

---
 src/pat/depends/index.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pat/depends/index.html b/src/pat/depends/index.html
index b5beb763d..2ace5b01d 100644
--- a/src/pat/depends/index.html
+++ b/src/pat/depends/index.html
@@ -21,19 +21,19 @@
                     <legend>Flavour</legend>
 
                     <label
-                        ><input type="radio" name="flavour" value="margherita" />
+                        ><input type="radio" name="flavour" value="margherita" autocomplete="off" />
                         Margherita</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="hawaii" />
+                        ><input type="radio" name="flavour" value="hawaii" autocomplete="off" />
                         Hawaii</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="bacon" />
+                        ><input type="radio" name="flavour" value="bacon" autocomplete="off" checked />
                         Bacon Supreme</label
                     >
                     <label
-                        ><input type="radio" name="flavour" value="sea" />
+                        ><input type="radio" name="flavour" value="sea" autocomplete="off" />
                         Fruits de mer</label
                     >
                 </fieldset>
@@ -55,7 +55,7 @@
                 <fieldset class="group pat-checklist">
                     <legend>Add extra toppings</legend>
                     <label>
-                        <input type="checkbox" name="custom" /> Add extra
+                        <input type="checkbox" name="custom" autocomplete="off" /> Add extra
                         toppings
                     </label>
                 </fieldset>
@@ -68,18 +68,18 @@
                     <label
                         class="pat-depends"
                         data-pat-depends="flavour!=hawaii"
-                        ><input type="checkbox" name="pineapple" />
+                        ><input type="checkbox" name="pineapple" autocomplete="off"/>
                         Pineapple</label
                     >
                     <label
-                        ><input type="checkbox" name="gorgonzola" />
+                        ><input type="checkbox" name="gorgonzola" autocomplete="off" />
                         Gorgonzola</label
                     >
                     <label
-                        ><input type="checkbox" name="peanuts" /> Peanuts</label
+                        ><input type="checkbox" name="peanuts" autocomplete="off" /> Peanuts</label
                     >
                     <label
-                        ><input type="checkbox" name="redonion" /> Red
+                        ><input type="checkbox" name="redonion" autocomplete="off" /> Red
                         onions</label
                     >
                 </fieldset>