.size-limit.json

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

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.11](https://github.com/remarkablemark/html-react-parser/compare/v3.0.10...v3.0.11) (2023-03-04)
+
+
+### Bug Fixes
+
+* **attributes-to-props:** don't convert non-uncontrolled component props ([76eab7c](https://github.com/remarkablemark/html-react-parser/commit/76eab7c0f22acef2209c8c556218a92461a224a6)), closes [#839](https://github.com/remarkablemark/html-react-parser/issues/839)
+
 ## [3.0.10](https://github.com/remarkablemark/html-react-parser/compare/v3.0.9...v3.0.10) (2023-03-04)
 
 

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);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-react-parser",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "description": "HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
   "main": "index.js",

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

@@ -16,5 +16,7 @@ module.exports = {
   title: '<title><em>text</em></title>',
   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">'
+  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,33 @@ 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>
+        <article>
+          <p>
+            Test
+          </p>
+        </article>
+      </template>
+    `);
+  });
+
   it('parses SVG', () => {
     expect(parse(svg.complex)).toMatchInlineSnapshot(`
       <svg