Merge pull request #852 from remarkablemark/fix/attributes-to-props

fix(attributes-to-props): don't convert non-uncontrolled component props

Author: remarkablemark

.size-limit.json

@@ -1,6 +1,6 @@
 [
   {
     "path": "dist/html-react-parser.min.js",
-    "limit": "10.593 KB"
+    "limit": "10.6 KB"
   }
 ]

lib/attributes-to-props.js

@@ -1,6 +1,16 @@
 var reactProperty = require('react-property');
 var utilities = require('./utilities');
 
+// https://reactjs.org/docs/uncontrolled-components.html
+// https://developer.mozilla.org/docs/Web/HTML/Attributes
+var UNCONTROLLED_COMPONENT_ATTRIBUTES = ['checked', 'value'];
+var UNCONTROLLED_COMPONENT_NAMES = ['input', 'select', 'textarea'];
+
+var VALUE_ONLY_INPUTS = {
+  reset: true,
+  submit: true
+};
+
 /**
  * Converts HTML/SVG DOM attributes to React props.
  *
@@ -11,18 +21,13 @@ var utilities = require('./utilities');
 module.exports = function attributesToProps(attributes, nodeName) {
   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];
+  var inputIsValueOnly = attributes.type && VALUE_ONLY_INPUTS[attributes.type];
 
   for (attributeName in attributes) {
     attributeValue = attributes[attributeName];
@@ -41,10 +46,9 @@ module.exports = function attributesToProps(attributes, nodeName) {
       propertyInfo = reactProperty.getPropertyInfo(propName);
 
       // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
-      // https://reactjs.org/docs/uncontrolled-components.html
       if (
-        (propName === 'checked' || propName === 'value') &&
-        nodeName !== 'option' &&
+        UNCONTROLLED_COMPONENT_ATTRIBUTES.indexOf(propName) !== -1 &&
+        UNCONTROLLED_COMPONENT_NAMES.indexOf(nodeName) !== -1 &&
         !inputIsValueOnly
       ) {
         propName = getPropName('default' + attributeNameLowerCased);

test/attributes-to-props.test.js

@@ -5,6 +5,30 @@ it('returns empty object is argument is undefined', () => {
   expect(attributesToProps()).toEqual({});
 });
 
+it.each(['input', 'select', 'textarea'])(
+  'converts uncontrolled component attributes',
+  nodeName => {
+    expect(
+      attributesToProps({ value: 'foo', checked: false }, nodeName)
+    ).toEqual({
+      defaultValue: 'foo',
+      defaultChecked: true
+    });
+  }
+);
+
+it.each(['button', 'data', 'li', 'meter', 'option', 'progress', 'param'])(
+  'converts non-uncontrolled component attributes',
+  nodeName => {
+    expect(
+      attributesToProps({ value: 'foo', checked: false }, nodeName)
+    ).toEqual({
+      value: 'foo',
+      checked: true
+    });
+  }
+);
+
 describe('attributesToProps with HTML attribute', () => {
   it('converts attributes to React props', () => {
     const attributes = {
@@ -128,7 +152,7 @@ describe('attributesToProps with HTML attribute', () => {
       selected: '',
       truespeed: ''
     };
-    expect(attributesToProps(attributes)).toMatchInlineSnapshot(`
+    expect(attributesToProps(attributes, 'select')).toMatchInlineSnapshot(`
       {
         "allowFullScreen": true,
         "allowpaymentrequest": "",
@@ -183,7 +207,7 @@ describe('attributesToProps with HTML attribute', () => {
   ])(
     'converts form attribute to uncontrolled component property',
     (attributes, props) => {
-      expect(attributesToProps(attributes)).toEqual(props);
+      expect(attributesToProps(attributes, 'input')).toEqual(props);
     }
   );
 

test/data/html.js

@@ -17,5 +17,6 @@ module.exports = {
   customElement:
     '<custom-element class="myClass" custom-attribute="value" style="-o-transition: all .5s; line-height: 1;"></custom-element>',
   form: '<input type="text" value="foo" checked="checked">',
+  list: '<ol><li>One</li><li value="2">Two</li></ol>',
   template: '<template><article><p>Test</p></article></template>'
 };

test/index.test.js

@@ -163,6 +163,21 @@ describe('HTMLReactParser', () => {
     `);
   });
 
+  it('parses list', () => {
+    expect(parse(html.list)).toMatchInlineSnapshot(`
+      <ol>
+        <li>
+          One
+        </li>
+        <li
+          value="2"
+        >
+          Two
+        </li>
+      </ol>
+    `);
+  });
+
   it('parses template', () => {
     expect(parse(html.template)).toMatchInlineSnapshot(`
       <template>