this is the correct way to set a boolean attribute to true.

Co-authored-by: MichaelWest22 <[email protected]>
bigskysoftware · Jan 26, 2025 · 3b04e97 · 3b04e97
1 parent 222d7dd
commit 3b04e97
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/idiomorph.js b/src/idiomorph.js
@@ -737,8 +737,9 @@ var Idiomorph = (function () {
         }
         if (newLiveValue) {
           if (!ignoreUpdate) {
-            // TODO: do we really want this? tests say so but it feels wrong
-            oldElement.setAttribute(attributeName, newLiveValue);
+            // https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML
+            // this is the correct way to set a boolean attribute to "true"
+            oldElement.setAttribute(attributeName, "");
           }
         } else {
           if (!ignoreAttribute(attributeName, oldElement, "remove", ctx)) {

diff --git a/test/core.js b/test/core.js
@@ -427,7 +427,7 @@ describe("Core morphing tests", function () {
 
     let finalSrc = '<input type="checkbox" checked>';
     Idiomorph.morph(initial, finalSrc, { morphStyle: "outerHTML" });
-    initial.outerHTML.should.equal('<input type="checkbox" checked="true">');
+    initial.outerHTML.should.equal('<input type="checkbox" checked="">');
     initial.checked.should.equal(true);
     document.body.removeChild(parent);
   });
@@ -474,7 +474,7 @@ describe("Core morphing tests", function () {
     // is this a problem at all?
     parent.innerHTML.should.equal(`
         <select>
-          <option selected="true">0</option>
+          <option selected="">0</option>
           <option>1</option>
         </select>
       `);
@@ -506,7 +506,7 @@ describe("Core morphing tests", function () {
     let finalSrc = `
         <select>
           <option>0</option>
-          <option selected="true">1</option>
+          <option selected="">1</option>
         </select>
       `;
     Idiomorph.morph(parent, finalSrc, { morphStyle: "innerHTML" });