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

Issue:
Regression in simple example, checkbox cannot be unchecked anymore
<!--

👋 Hey, thanks for taking an interest in 🏁 React Final Form!

-->

### Are you submitting a **bug report** or a **feature request**?

bug

<!-- For support request, please use Stack Overflow instead. This issue tracker is reserved for bugs and features. -->

### What is the current behavior?

Employed checkbox cannot be unchecked anymore

![image](https://user-images.githubusercontent.com/383212/34870142-87f55e1e-f789-11e7-8bac-ce33ebb0f8de.png)

<!-- 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?

to work :)

### Sandbox Link

simple example, https://codesandbox.io/s/ww40y2m595

<!-- Problems are much easier to understand and debug if they can be demonstrated in a minimal environment.  -->

### What's your environment?

<!-- 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:
Fixed checkbox bug
Fixes #109.

Patch:
diff --git a/package.json b/package.json
index 08a2fa3..035377a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-final-form",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description":
     "🏁 High performance subscription-based form state management for React",
   "main": "dist/react-final-form.cjs.js",
diff --git a/src/Field.js b/src/Field.js
index d73d385..264d06a 100644
--- a/src/Field.js
+++ b/src/Field.js
@@ -99,10 +99,10 @@ export default class Field extends React.PureComponent<Props, State> {
       this.state.state.blur()
     },
     onChange: (event: SyntheticInputEvent<*> | any) => {
-      const { parse } = this.props
+      const { parse, value: _value } = this.props
       const value: any =
         event && event.target
-          ? getValue(event, this.state.state.value, isReactNative)
+          ? getValue(event, this.state.state.value, _value, isReactNative)
           : event
       this.state.state.change(
         parse !== null ? parse(value, this.props.name) : value
diff --git a/src/getValue.js b/src/getValue.js
index 9ee8ef7..5b15338 100644
--- a/src/getValue.js
+++ b/src/getValue.js
@@ -15,6 +15,7 @@ const getSelectedValues = options => {
 const getValue = (
   event: SyntheticInputEvent<*>,
   currentValue: any,
+  valueProp: any,
   isReactNative: boolean
 ) => {
   if (
@@ -31,19 +32,19 @@ const getValue = (
   const { target: { type, value, checked } } = detypedEvent
   switch (type) {
     case 'checkbox':
-      if (value !== undefined) {
+      if (valueProp !== undefined) {
         // we are maintaining an array, not just a boolean
         if (checked) {
           // add value to current array value
           return Array.isArray(currentValue)
-            ? currentValue.concat(value)
-            : [value]
+            ? currentValue.concat(valueProp)
+            : [valueProp]
         } else {
           // remove value from current array value
           if (!Array.isArray(currentValue)) {
             return currentValue
           }
-          const index = currentValue.indexOf(value)
+          const index = currentValue.indexOf(valueProp)
           if (index < 0) {
             return currentValue
           } else {
diff --git a/src/index.js b/src/index.js
index 393dfa5..711cc09 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,4 +2,4 @@
 export { default as Field } from './Field'
 export { default as Form } from './ReactFinalForm'
 export { default as FormSpy } from './FormSpy'
-export const version = '3.0.0'
+export const version = '3.0.1'


Test patch:
diff --git a/src/getValue.test.js b/src/getValue.test.js
index b10d9df..6809d76 100644
--- a/src/getValue.test.js
+++ b/src/getValue.test.js
@@ -13,6 +13,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe('foo')
@@ -29,6 +30,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe('foo')
@@ -42,6 +44,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(undefined)
@@ -55,6 +58,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(null)
@@ -72,6 +76,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(true)
@@ -86,6 +91,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(true)
@@ -100,6 +106,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(false)
@@ -114,6 +121,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(false)
@@ -127,11 +135,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: true,
-            value: 'foo'
+            checked: true
           }
         },
         undefined,
+        'foo',
         false
       )
     ).toEqual(['foo'])
@@ -142,11 +150,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: true,
-            value: 'C'
+            checked: true
           }
         },
         ['A', 'B'],
+        'C',
         false
       )
     ).toEqual(['A', 'B', 'C'])
@@ -157,11 +165,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: false,
-            value: 'foo'
+            checked: false
           }
         },
         ['foo'],
+        'foo',
         false
       )
     ).toEqual([])
@@ -172,11 +180,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: false,
-            value: 'B'
+            checked: false
           }
         },
         ['A', 'B', 'C'],
+        'B',
         false
       )
     ).toEqual(['A', 'C'])
@@ -187,11 +195,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: false,
-            value: 'F'
+            checked: false
           }
         },
         ['A', 'B', 'C'],
+        'F',
         false
       )
     ).toEqual(['A', 'B', 'C'])
@@ -202,11 +210,11 @@ describe('getValue', () => {
           stopPropagation: noop,
           target: {
             type: 'checkbox',
-            checked: false,
-            value: 'F'
+            checked: false
           }
         },
         undefined,
+        'F',
         false
       )
     ).toBeUndefined()
@@ -224,6 +232,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe('3.1415')
@@ -238,6 +247,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe('2.71828')
@@ -252,6 +262,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe('3')
@@ -266,6 +277,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe('3.1415')
@@ -281,6 +293,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe('')
@@ -306,6 +319,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toEqual(expected)
@@ -319,6 +333,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toEqual([]) // no options specified
@@ -333,6 +348,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toEqual(expected)
@@ -349,6 +365,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(undefined)
@@ -362,6 +379,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(undefined)
@@ -375,6 +393,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(null)
@@ -388,6 +407,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(null)
@@ -401,6 +421,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(true)
@@ -414,6 +435,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(true)
@@ -427,6 +449,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(false)
@@ -440,6 +463,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(false)
@@ -453,6 +477,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe(42)
@@ -466,6 +491,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe(42)
@@ -479,6 +505,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         true
       )
     ).toBe('foo')
@@ -492,6 +519,7 @@ describe('getValue', () => {
           }
         },
         undefined,
+        undefined,
         false
       )
     ).toBe('foo')