Repository: final-form/react-final-form (js)

Issue:
Checked value is not provided when using custom `component` prop
<!--

👋 Hey, thanks for taking an interest in 🏁 React Final Form!

-->

### Are you submitting a **bug report** or a **feature request**?
bug report
<!-- For support request, please use Stack Overflow instead. This issue tracker is reserved for bugs and features. -->

### What is the current behavior?
When `radio` input is created with `component` prop, `checked` value is not provided.

[![Edit 🏁 React Final Form radio 🐛](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m41mz8q038)
<!-- If this is a bug, please include steps to reproduce and a minimal demo of the problem using Sandbox, Plunkr, WebpackBin or JSFiddle. -->

### What is the expected behavior?
`input` prop should contain `checked` value.

### Sandbox Link

<!-- Problems are much easier to understand and debug if they can be demonstrated in a minimal environment.  -->

### What's your environment?

package | version
---------|---------
React Final Form | 3.0.2
Final Form | 4.0.0

<!-- Include 🏁 React Final Form version, 🏁 Final Form version, OS/browser affected, Node version, etc. -->

### Other information

<!-- Include here any detailed explanation, stacktraces, related issues, links for Stack Overflow, Twitter, etc. -->


Pull request:
Render custom checkbox and custom radio with checked prop
<!--

👋 Hey, thanks for your interest in contributing to 🏁 React Final Form!

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a
lot of time and effort into a new feature. To avoid this from happening, we
request that contributors create an issue to first discuss any significant new
features.

Please try to keep your pull request focused in scope and avoid including
unrelated commits.

After you have submitted your pull request, we’ll try to get back to you as soon
as possible. We may suggest some changes or improvements.

Please format the code before submitting your pull request by running:

```
npm run precommit
```

https://github.com/final-form/react-final-form/blob/master/.github/CONTRIBUTING.md

-->
fixes #117 

Patch:
diff --git a/src/Field.js b/src/Field.js
index 8d31322..714546d 100644
--- a/src/Field.js
+++ b/src/Field.js
@@ -143,18 +143,16 @@ export default class Field extends React.PureComponent<Props, State> {
       value = ''
     }
     const input = { name, value, ...this.handlers }
-    if (component === 'input') {
-      if (rest.type === 'checkbox') {
-        if (_value === undefined) {
-          input.checked = !!value
-        } else {
-          input.checked = Array.isArray(value) && ~value.indexOf(_value)
-          input.value = _value
-        }
-      } else if (rest.type === 'radio') {
-        input.checked = value === _value
+    if (rest.type === 'checkbox') {
+      if (_value === undefined) {
+        input.checked = !!value
+      } else {
+        input.checked = Array.isArray(value) && ~value.indexOf(_value)
         input.value = _value
       }
+    } else if (rest.type === 'radio') {
+      input.checked = value === _value
+      input.value = _value
     }
     if (component === 'select' && rest.multiple) {
       input.value = input.value || []


Test patch:
diff --git a/src/Field.test.js b/src/Field.test.js
index b81da3b..929a28c 100644
--- a/src/Field.test.js
+++ b/src/Field.test.js
@@ -541,6 +541,40 @@ describe('Field', () => {
     expect(bazInput.checked).toBe(true)
   })
 
+  it('should render custom radio component with checked prop', () => {
+    const Radio = jest.fn(() => null)
+    TestUtils.renderIntoDocument(
+      <Form
+        onSubmit={onSubmitMock}
+        render={() => (
+          <form>
+            <Field name="foo" type="radio" value="yes" component={Radio} />
+          </form>
+        )}
+        initialValues={{ foo: 'yes' }}
+      />
+    )
+    expect(Radio.mock.calls[0][0]).toMatchObject({ input: { checked: true } })
+  })
+
+  it('should render custom checkbox component with checked prop', () => {
+    const Checkbox = jest.fn(() => null)
+    TestUtils.renderIntoDocument(
+      <Form
+        onSubmit={onSubmitMock}
+        render={() => (
+          <form>
+            <Field name="foo" type="checkbox" component={Checkbox} />
+          </form>
+        )}
+        initialValues={{ foo: true }}
+      />
+    )
+    expect(Checkbox.mock.calls[0][0]).toMatchObject({
+      input: { checked: true }
+    })
+  })
+
   it('should use isEqual to calculate dirty/pristine', () => {
     const input = jest.fn(({ input }) => <input {...input} />)