Merge pull request #1074 from Patternslib/fix-dom-hide

fix(core dom): show/hide - do not set the hidden attribute.
Patternslib · Sep 28, 2022 · 8a5ecd9 · 8a5ecd9
2 parents b4f4bef + af24138
commit 8a5ecd9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src/core/dom.js b/src/core/dom.js
@@ -66,7 +66,6 @@ const hide = (el) => {
         el[DATA_STYLE_DISPLAY] = el.style.display;
     }
     el.style.display = "none";
-    el.setAttribute("hidden", "");
 };
 
 /**
@@ -79,7 +78,6 @@ const show = (el) => {
     const val = el[DATA_STYLE_DISPLAY] || null;
     el.style.display = val;
     delete el[DATA_STYLE_DISPLAY];
-    el.removeAttribute("hidden");
 };
 
 /**

diff --git a/src/core/dom.test.js b/src/core/dom.test.js
@@ -122,15 +122,13 @@ describe("core.dom tests", () => {
             expect(el.style.marginTop).toBe("4em");
             expect(el.style.display).toBe("none");
             expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
-            expect(el.hasAttribute("hidden")).toBe(true);
 
             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();
-            expect(el.hasAttribute("hidden")).toBe(false);
 
             el.style.display = "inline";
             dom.hide(el);
@@ -139,14 +137,26 @@ describe("core.dom tests", () => {
             expect(el.style.marginTop).toBe("4em");
             expect(el.style.display).toBe("none");
             expect(el.getAttribute("style").indexOf("display") >= -1).toBeTruthy();
-            expect(el.hasAttribute("hidden")).toBe(true);
 
             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();
+        });
+
+        it("most not set the hidden attribute", (done) => {
+            // dom.hide must not set the hidden attribute due to,
+            // https://stackoverflow.com/a/28340579/1337474
+            // otherwise hidden input elements might not be able to be
+            // submitted in Chrome and Safari.
+
+            const el = document.createElement("div");
+            dom.hide(el);
+
             expect(el.hasAttribute("hidden")).toBe(false);
 
             done();

diff --git a/src/pat/auto-suggest/auto-suggest.test.js b/src/pat/auto-suggest/auto-suggest.test.js
@@ -66,7 +66,7 @@ describe("pat-autosuggest", function () {
             testutils.removeSelect2();
 
             expect($el[0].getAttribute("type")).toBe("text");
-            expect($el[0].hasAttribute("hidden")).toBe(true);
+            expect($el[0].style.display).toBe("none");
         });
 
         it("1.1 - An <input> element with an ajax option keeps the ajax option when turning into a select2 widget", async function () {

diff --git a/src/pat/date-picker/date-picker.test.js b/src/pat/date-picker/date-picker.test.js
@@ -55,7 +55,7 @@ describe("pat-date-picker", function () {
         expect(display_el.textContent).toBeFalsy();
 
         expect(el.getAttribute("type")).toBe("date");
-        expect(el.hasAttribute("hidden")).toBe(true);
+        expect(el.style.display).toBe("none");
 
         display_el.click();