Fix/input value type change

dist/morphdom-esm.js

@@ -1,7 +1,8 @@
 var DOCUMENT_FRAGMENT_NODE = 11;
 
 function morphAttrs(fromNode, toNode) {
-    var toNodeAttrs = toNode.attributes;
+    // Convert to array to use findIndex/unshift/splice if required below
+    var toNodeAttrs = Array.from(toNode.attributes);
     var attr;
     var attrName;
     var attrNamespaceURI;
@@ -13,6 +14,18 @@ function morphAttrs(fromNode, toNode) {
       return;
     }
 
+    // If input element types do not match, change their value last in case the new value can't hold the old value
+    if (fromNode.nodeName === "INPUT" && toNode.nodeName === "INPUT" && fromNode.attributes.type !== toNode.attributes.type) {
+        // Position of the value attr, if it exists
+        var toNodeAttrValueIndex = toNodeAttrs.findIndex(function(a) {
+            return a.name === "value";
+        });
+        if (toNodeAttrValueIndex !== -1) {
+            // Send it to the front by splicing and unshifting
+            toNodeAttrs.unshift(toNodeAttrs.splice(toNodeAttrValueIndex, 1)[0]);
+        }
+    }
+
     // update attributes on original DOM element
     for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
         attr = toNodeAttrs[i];

dist/morphdom-umd.js

@@ -7,7 +7,8 @@
     var DOCUMENT_FRAGMENT_NODE = 11;
 
     function morphAttrs(fromNode, toNode) {
-        var toNodeAttrs = toNode.attributes;
+        // Convert to array to use findIndex/unshift/splice if required below
+        var toNodeAttrs = Array.from(toNode.attributes);
         var attr;
         var attrName;
         var attrNamespaceURI;
@@ -19,6 +20,18 @@
           return;
         }
 
+        // If input element types do not match, change their value last in case the new value can't hold the old value
+        if (fromNode.nodeName === "INPUT" && toNode.nodeName === "INPUT" && fromNode.attributes.type !== toNode.attributes.type) {
+            // Position of the value attr, if it exists
+            var toNodeAttrValueIndex = toNodeAttrs.findIndex(function(a) {
+                return a.name === "value";
+            });
+            if (toNodeAttrValueIndex !== -1) {
+                // Send it to the front by splicing and unshifting
+                toNodeAttrs.unshift(toNodeAttrs.splice(toNodeAttrValueIndex, 1)[0]);
+            }
+        }
+
         // update attributes on original DOM element
         for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
             attr = toNodeAttrs[i];

dist/morphdom.js

@@ -3,7 +3,8 @@
 var DOCUMENT_FRAGMENT_NODE = 11;
 
 function morphAttrs(fromNode, toNode) {
-    var toNodeAttrs = toNode.attributes;
+    // Convert to array to use findIndex/unshift/splice if required below
+    var toNodeAttrs = Array.from(toNode.attributes);
     var attr;
     var attrName;
     var attrNamespaceURI;
@@ -15,6 +16,18 @@ function morphAttrs(fromNode, toNode) {
       return;
     }
 
+    // If input element types do not match, change their value last in case the new value can't hold the old value
+    if (fromNode.nodeName === "INPUT" && toNode.nodeName === "INPUT" && fromNode.attributes.type !== toNode.attributes.type) {
+        // Position of the value attr, if it exists
+        var toNodeAttrValueIndex = toNodeAttrs.findIndex(function(a) {
+            return a.name === "value";
+        });
+        if (toNodeAttrValueIndex !== -1) {
+            // Send it to the front by splicing and unshifting
+            toNodeAttrs.unshift(toNodeAttrs.splice(toNodeAttrValueIndex, 1)[0]);
+        }
+    }
+
     // update attributes on original DOM element
     for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
         attr = toNodeAttrs[i];

src/morphAttrs.js

@@ -1,7 +1,8 @@
 var DOCUMENT_FRAGMENT_NODE = 11;
 
 export default function morphAttrs(fromNode, toNode) {
-    var toNodeAttrs = toNode.attributes;
+    // Convert to array to use findIndex/unshift/splice if required below
+    var toNodeAttrs = Array.from(toNode.attributes);
     var attr;
     var attrName;
     var attrNamespaceURI;
@@ -13,6 +14,18 @@ export default function morphAttrs(fromNode, toNode) {
       return;
     }
 
+    // If input element types do not match, change their value last in case the new value can't hold the old value
+    if (fromNode.nodeName === "INPUT" && toNode.nodeName === "INPUT" && fromNode.attributes.type !== toNode.attributes.type) {
+        // Position of the value attr, if it exists
+        var toNodeAttrValueIndex = toNodeAttrs.findIndex(function(a) {
+            return a.name === "value";
+        });
+        if (toNodeAttrValueIndex !== -1) {
+            // Send it to the front by splicing and unshifting
+            toNodeAttrs.unshift(toNodeAttrs.splice(toNodeAttrValueIndex, 1)[0]);
+        }
+    }
+
     // update attributes on original DOM element
     for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
         attr = toNodeAttrs[i];

test/browser/test.js

@@ -1662,4 +1662,36 @@ describe('morphdom' , function() {
 
          expect(div1).to.equal(div1_2);
      });
+
+    it('should transform a number input to a color input', function() {
+        var el1 = document.createElement('input');
+        el1.type = 'number';
+        el1.setAttribute('value', '8');
+        el1.setAttribute('name', 'width');
+        el1.setAttribute('min', '0');
+        el1.setAttribute('max', '255');
+
+        var el2 = '<input type="color" value="#ff00ff" />';
+
+        morphdom(el1, el2);
+
+        expect(el1.getAttribute('value')).to.equal("#ff00ff");
+        expect(el1.type).to.equal('color');
+    });
+
+    it('should transform a color input to a number input', function() {
+        var el1 = document.createElement('input');
+        el1.type = 'color';
+        el1.setAttribute('value', '#ff00ff');
+
+        var el2 = '<input type="number" name="width" value="8" min="0" max="255" />';
+
+        morphdom(el1, el2);
+
+        expect(el1.getAttribute('value')).to.equal("8");
+        expect(el1.getAttribute('name')).to.equal('width');
+        expect(el1.getAttribute('min')).to.equal('0');
+        expect(el1.getAttribute('max')).to.equal('255');
+        expect(el1.type).to.equal('number');
+    });
 });