Merge pull request #410 from thoughtbot/fix-submit-and-reset-value

fix: make reset and submit input types retain value attribs

Author: remarkablemark

lib/attributes-to-props.js

@@ -10,12 +10,18 @@ var utilities = require('./utilities');
 module.exports = function attributesToProps(attributes) {
   attributes = attributes || {};
 
+  var valueOnlyInputs = {
+    reset: true,
+    submit: true
+  };
+
   var attributeName;
   var attributeNameLowerCased;
   var attributeValue;
   var propName;
   var propertyInfo;
   var props = {};
+  var inputIsValueOnly = attributes.type && valueOnlyInputs[attributes.type];
 
   for (attributeName in attributes) {
     attributeValue = attributes[attributeName];
@@ -35,7 +41,10 @@ module.exports = function attributesToProps(attributes) {
 
       // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
       // https://reactjs.org/docs/uncontrolled-components.html
-      if (propName === 'checked' || propName === 'value') {
+      if (
+        (propName === 'checked' || propName === 'value') &&
+        !inputIsValueOnly
+      ) {
         propName = getPropName('default' + attributeNameLowerCased);
       }
 

test/attributes-to-props.test.js

@@ -108,7 +108,15 @@ describe('attributesToProps with HTML attribute', () => {
     [{ checked: '' }, { defaultChecked: true }],
     [{ checked: 'checked' }, { defaultChecked: true }],
     [{ value: '' }, { defaultValue: '' }],
-    [{ value: 'foo' }, { defaultValue: 'foo' }]
+    [{ value: 'foo' }, { defaultValue: 'foo' }],
+    [
+      { value: 'foo', type: 'submit' },
+      { value: 'foo', type: 'submit' }
+    ],
+    [
+      { value: 'foo', type: 'reset' },
+      { value: 'foo', type: 'reset' }
+    ]
   ])(
     'converts form attribute to uncontrolled component property',
     (attributes, props) => {