Merge pull request #476 from acdlite/fix-withStateHandlers

Allow to use withStateHandlers with SyntheticEvents

src/packages/recompose/__tests__/withStateHandlers-test.js

@@ -4,6 +4,40 @@ import sinon from 'sinon'
 
 import { compose, withStateHandlers } from '../'
 
+test('withStateHandlers should persist events passed as argument', () => {
+  const component = ({ value, onChange }) =>
+    <div>
+      <input type="text" value={value} onChange={onChange} />
+      <p>
+        {value}
+      </p>
+    </div>
+
+  const InputComponent = withStateHandlers(
+    { value: '' },
+    {
+      onChange: () => e => ({
+        value: e.target.value,
+      }),
+    }
+  )(component)
+
+  const wrapper = mount(<InputComponent />)
+  const input = wrapper.find('input')
+  const output = wrapper.find('p')
+  // having that enzyme simulate does not simulate real situation
+  // emulate persist
+  input.simulate('change', {
+    persist() {
+      this.target = { value: 'Yay' }
+    },
+  })
+  expect(output.text()).toBe('Yay')
+
+  input.simulate('change', { target: { value: 'empty' } })
+  expect(output.text()).toBe('empty')
+})
+
 test('withStateHandlers adds a stateful value and a function for updating it', () => {
   const component = sinon.spy(() => null)
   component.displayName = 'component'

src/packages/recompose/withStateHandlers.js

@@ -13,8 +13,19 @@ const withStateHandlers = (initialState, stateUpdaters) => BaseComponent => {
       ? initialState(this.props)
       : initialState
 
-    stateUpdaters = mapValues(stateUpdaters, handler => (...args) =>
-      this.setState((state, props) => handler(state, props)(...args))
+    stateUpdaters = mapValues(
+      stateUpdaters,
+      handler => (mayBeEvent, ...args) => {
+        // Having that functional form of setState can be called async
+        // we need to persist SyntheticEvent
+        if (mayBeEvent && typeof mayBeEvent.persist === 'function') {
+          mayBeEvent.persist()
+        }
+
+        this.setState((state, props) =>
+          handler(state, props)(mayBeEvent, ...args)
+        )
+      }
     )
 
     shouldComponentUpdate(nextProps, nextState) {