fix syncing boolean attrs in morph

reported in bigskysoftware/idiomorph#22
piranha · Dec 11, 2023 · 9529311 · 9529311
1 parent a8b5ad8
commit 9529311
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 14 deletions.
diff --git a/twinspark.js b/twinspark.js
@@ -811,12 +811,17 @@
 
   /** @type {function(!Element, !Element, !string, !boolean=): void} */
   function syncattr(target, source, attr, withProp) {
-    var value = getattr(source, attr);
-    if (value != getattr(target, attr)) {
-      if (withProp) {
-        target[attr] = source[attr] || '';
+    if (withProp) {
+      value = source[attr];
+      if (value != target[attr]) {
+        target[attr] = value;
+        value !== null ? setattr(target, attr, value) : delattr(target, attr);
+      }
+    } else {
+      let value = getattr(source, attr);
+      if (value != getattr(target, attr)) {
+        value !== null ? setattr(target, attr, value) : delattr(target, attr);
       }
-      value ? setattr(target, attr, value) : delattr(target, attr);
     }
   }
 
@@ -920,13 +925,13 @@
       if (target.tagName == 'INPUT' && target.type != 'file') {
         // https://github.com/choojs/nanomorph/blob/master/lib/morph.js#L113
         // Changing the "value" attribute without changing the "value" property
-        // will have no effect since it is only used to set the initial
+        // will have no effect since attribute is only used to set the initial
         // value. Similar for the "checked" attribute, and "disabled".
         syncattr(target, reply, 'value', true);
         syncattr(target, reply, 'checked', true);
         syncattr(target, reply, 'disabled', true);
       } else if (target.tagName == 'OPTION') {
-        syncattr(target, reply, 'selected');
+        syncattr(target, reply, 'selected', true);
       } else if (target.tagName == 'TEXTAREA') {
         syncattr(target, reply, 'value');
         // NOTE what is this stuff, is it necessary? Can't find a test case, but

diff --git a/www/test/morph/core.js b/www/test/morph/core.js
@@ -221,4 +221,74 @@ describe("Core morphing tests", function(){
         initial.documentElement.outerHTML.should.equal(finalSrc);
     });
 
+    it('can morph input checked properly, remove checked', function()
+    {
+        let parent = make('<div><input type="checkbox" checked></div>');
+        document.body.append(parent);
+        let initial = parent.querySelector("input");
+
+        let finalSrc = make('<input type="checkbox">');
+        Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
+        if (initial.outerHTML !== '<input type="checkbox">') {
+            console.log("HTML after morph: " + initial.outerHTML);
+            console.log("Expected:         " + finalSrc.outerHTML);
+        }
+        initial.outerHTML.should.equal('<input type="checkbox">');
+        initial.checked.should.equal(false);
+        document.body.removeChild(parent);
+    });
+
+    it('can morph input checked properly, add checked', function()
+    {
+        let parent = make('<div><input type="checkbox"></div>');
+        document.body.append(parent);
+        let initial = parent.querySelector("input");
+
+        let finalSrc = make('<input type="checkbox" checked>');
+        Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
+        if (initial.outerHTML !== '<input type="checkbox" checked="">') {
+            console.log("HTML after morph: " + initial.outerHTML);
+            console.log("Expected:         " + finalSrc.outerHTML);
+        }
+        initial.outerHTML.should.equal('<input type="checkbox" checked="">');
+        initial.checked.should.equal(true);
+        document.body.removeChild(parent);
+    });
+
+    it('can morph input checked properly, set checked property to true', function()
+    {
+        let parent = make('<div><input type="checkbox" checked></div>');
+        document.body.append(parent);
+        let initial = parent.querySelector("input");
+        initial.checked = false;
+
+        let finalSrc = make('<input type="checkbox" checked>');
+        Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
+        if (initial.outerHTML !== '<input type="checkbox" checked="true">') {
+            console.log("HTML after morph: " + initial.outerHTML);
+            console.log("Expected:         " + finalSrc.outerHTML);
+        }
+        initial.outerHTML.should.equal('<input type="checkbox" checked="true">');
+        initial.checked.should.equal(true);
+        document.body.removeChild(parent);
+    });
+
+    it('can morph input checked properly, set checked property to false', function()
+    {
+        let parent = make('<div><input type="checkbox"></div>');
+        document.body.append(parent);
+        let initial = parent.querySelector("input");
+        initial.checked = true;
+
+        let finalSrc = make('<input type="checkbox">');
+        initial.checked = false;
+        Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
+        if (initial.outerHTML !== '<input type="checkbox">') {
+            console.log("HTML after morph: " + initial.outerHTML);
+            console.log("Expected:         " + finalSrc.outerHTML);
+        }
+        initial.outerHTML.should.equal('<input type="checkbox">');
+        initial.checked.should.equal(false);
+        document.body.removeChild(parent);
+    });
 })
diff --git a/www/test/morph/test-utilities.js b/www/test/morph/test-utilities.js
@@ -49,7 +49,7 @@ function print(elt) {
     return elt;
 }
 
-/* Emulate Mocha with WRU */
+/* Emulate Mocha with tinytest */
 
 (function(window) {
   var TESTS = [];
@@ -60,6 +60,7 @@ function print(elt) {
     desc = desc.replace('idiomorph', 'twinspark.morph');
     setup = null;
     TESTS.push({
+      group: true,
       name: `<h3 class=group>${desc}</h3>`,
       func: () => {
         // style group
@@ -88,18 +89,28 @@ function print(elt) {
   }
 
   function it(desc, cb) {
+    let func = cb;
     if (cb.length == 1) {
-      var test = function() {
+      func = function() {
         return new Promise(resolve => cb(resolve));
       }
-    } else {
-      var test = cb;
     }
-    TESTS.push({
+
+    let test = {
       name: desc,
       setup: setup,
-      func: test,
-    });
+      func: func,
+    }
+    TESTS.push(test);
+    return test;
+  }
+
+  function only(desc, cb) {
+    let group = TESTS.findLastIndex(item => item.group);
+    let test = it(desc, cb);
+    setTimeout(_ => {
+      TESTS = [TESTS[group], test];
+    }, 50);
   }
 
   function should(obj) {
@@ -135,5 +146,7 @@ function print(elt) {
   window.describe = describe;
   window.beforeEach = beforeEach;
   window.it = it;
+  it.only = only;
+  window.only = only;
   window.should = should;
 })(window);