Fix the "checked" attribute is not initially set on the input

dilidili · Jun 27, 2018 · 3c670a4 · 3c670a4
1 parent 6d6de60
commit 3c670a4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -739,9 +739,12 @@ describe('ReactDOMInput', () => {
     const cNode = stub.refs.c;
 
     expect(aNode.checked).toBe(true);
+    expect(bNode.getAttribute('checked')).toBe(null);
     expect(bNode.checked).toBe(false);
+    expect(bNode.getAttribute('checked')).toBe(null);
     // c is in a separate form and shouldn't be affected at all here
     expect(cNode.checked).toBe(true);
+    expect(cNode.getAttribute('checked')).toBe('checked');
 
     bNode.checked = true;
     // This next line isn't necessary in a proper browser environment, but
@@ -750,6 +753,11 @@ describe('ReactDOMInput', () => {
     aNode.checked = false;
     expect(cNode.checked).toBe(true);
 
+    // The original 'checked' attribute should be unchanged
+    expect(aNode.getAttribute('checked')).toBe(null);
+    expect(bNode.getAttribute('checked')).toBe(null);
+    expect(cNode.getAttribute('checked')).toBe('checked');
+
     // Now let's run the actual ReactDOMInput change event handler
     ReactTestUtils.Simulate.change(bNode);
 

diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js
@@ -244,6 +244,10 @@ export function postMountWrapper(
   }
   node.defaultChecked = !node.defaultChecked;
   node.defaultChecked = !node.defaultChecked;
+  // Set the "checked" attribute initially.
+  if (props.hasOwnProperty('defaultChecked') && !!props.defaultChecked) {
+    node.setAttribute('checked', 'checked');
+  }
   if (name !== '') {
     node.name = name;
   }