fix(attributes-to-props): don't convert value of option tag (#790)

* fix(attributes-to-props): don't convert value of option tag

Fixes #625

* fix(attributes-to-props): fix issues with tests

* fix(attributes-to-props): increase size limit

* fix(attributes-to-props): improve jsdoc documentation

* fix(attributes-to-props): remove lock file

* fix(attributes-to-props): fix type issues

Author: adammockor

.size-limit.json

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

lib/attributes-to-props.d.ts

@@ -10,6 +10,10 @@ export type Props = Record<string, string> & {
  * Converts HTML/SVG DOM attributes to React props.
  *
  * @param attributes - HTML/SVG DOM attributes.
+ * @param nodeName - DOM node name.
  * @returns - React props.
  */
-export default function attributesToProps(attributes: Attributes): Props;
+export default function attributesToProps(
+  attributes: Attributes,
+  nodeName?: string
+): Props;

lib/attributes-to-props.js

@@ -5,9 +5,10 @@ var utilities = require('./utilities');
  * Converts HTML/SVG DOM attributes to React props.
  *
  * @param {object} [attributes={}] - HTML/SVG DOM attributes.
+ * @param {string} [nodeName] - DOM node name.
  * @returns - React props.
  */
-module.exports = function attributesToProps(attributes) {
+module.exports = function attributesToProps(attributes, nodeName) {
   attributes = attributes || {};
 
   var valueOnlyInputs = {
@@ -43,6 +44,7 @@ module.exports = function attributesToProps(attributes) {
       // https://reactjs.org/docs/uncontrolled-components.html
       if (
         (propName === 'checked' || propName === 'value') &&
+        nodeName !== 'option' &&
         !inputIsValueOnly
       ) {
         propName = getPropName('default' + attributeNameLowerCased);

lib/dom-to-react.js

@@ -76,7 +76,7 @@ function domToReact(nodes, options) {
     if (skipAttributesToProps(node)) {
       setStyleProp(props.style, props);
     } else if (props) {
-      props = attributesToProps(props);
+      props = attributesToProps(props, node.name);
     }
 
     children = null;

test/attributes-to-props.test.js

@@ -186,6 +186,12 @@ describe('attributesToProps with HTML attribute', () => {
       expect(attributesToProps(attributes)).toEqual(props);
     }
   );
+
+  it('preserves value of option element', () => {
+    expect(attributesToProps({ value: 'foo' }, 'option')).toEqual({
+      value: 'foo'
+    });
+  });
 });
 
 describe('attributesToProps with SVG attribute', () => {