Merge pull request #388 from remarkablemark/fix/uncontrolled-components

remarkablemark · web-flow · commit 40d136955225 · 2021-12-13T18:12:32.000-05:00
fix(attributes-to-props): convert attribute to uncontrolled component prop
diff --git a/lib/attributes-to-props.js b/lib/attributes-to-props.js
@@ -28,11 +28,19 @@ module.exports = function attributesToProps(attributes) {
 
     // convert HTML/SVG attribute to React prop
     attributeNameLowerCased = attributeName.toLowerCase();
-    propName = reactProperty.possibleStandardNames[attributeNameLowerCased];
+    propName = getPropName(attributeNameLowerCased);
 
     if (propName) {
-      props[propName] = attributeValue;
       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') {
+        propName = getPropName('default' + attributeNameLowerCased);
+      }
+
+      props[propName] = attributeValue;
+
       switch (propertyInfo && propertyInfo.type) {
         case reactProperty.BOOLEAN:
           props[propName] = true;
@@ -57,3 +65,13 @@ module.exports = function attributesToProps(attributes) {
 
   return props;
 };
+
+/**
+ * Gets prop name from lowercased attribute name.
+ *
+ * @param {string} attributeName - Lowercased attribute name.
+ * @return {string}
+ */
+function getPropName(attributeName) {
+  return reactProperty.possibleStandardNames[attributeName];
+}
diff --git a/test/__snapshots__/attributes-to-props.test.js.snap b/test/__snapshots__/attributes-to-props.test.js.snap
@@ -31,9 +31,9 @@ Object {
   "async": true,
   "autoFocus": true,
   "autoPlay": true,
-  "checked": true,
   "controls": true,
   "default": true,
+  "defaultChecked": true,
   "disabled": true,
   "draggable": "false",
   "formNoValidate": true,
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -110,6 +110,14 @@ exports[`HTMLReactParser parses empty <script> 1`] = `<script />`;
 
 exports[`HTMLReactParser parses empty <style> 1`] = `<style />`;
 
+exports[`HTMLReactParser parses form 1`] = `
+<input
+  defaultChecked={true}
+  defaultValue="foo"
+  type="text"
+/>
+`;
+
 exports[`HTMLReactParser parses multiple HTML elements 1`] = `
 Array [
   <p>
diff --git a/test/attributes-to-props.test.js b/test/attributes-to-props.test.js
@@ -103,6 +103,18 @@ describe('attributesToProps with HTML attribute', () => {
   ])('converts overloaded boolean attribute: %p', (attributes, props) => {
     expect(attributesToProps(attributes)).toEqual(props);
   });
+
+  it.each([
+    [{ checked: '' }, { defaultChecked: true }],
+    [{ checked: 'checked' }, { defaultChecked: true }],
+    [{ value: '' }, { defaultValue: '' }],
+    [{ value: 'foo' }, { defaultValue: 'foo' }]
+  ])(
+    'converts form attribute to uncontrolled component property',
+    (attributes, props) => {
+      expect(attributesToProps(attributes)).toEqual(props);
+    }
+  );
 });
 
 describe('attributesToProps with SVG attribute', () => {
diff --git a/test/data/html.js b/test/data/html.js
@@ -15,5 +15,6 @@ module.exports = {
   doctype: '<!DOCTYPE html>',
   title: '<title><em>text</em></title>',
   customElement:
-    '<custom-element class="myClass" custom-attribute="value" style="-o-transition: all .5s; line-height: 1;"></custom-element>'
+    '<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">'
 };
diff --git a/test/index.test.js b/test/index.test.js
@@ -65,6 +65,10 @@ describe('HTMLReactParser', () => {
     expect(parse('<style></style>')).toMatchSnapshot();
   });
 
+  it('parses form', () => {
+    expect(parse(html.form)).toMatchSnapshot();
+  });
+
   it('parses SVG', () => {
     expect(parse(svg.complex)).toMatchSnapshot();
   });
