Merge branch 'master' of github.com:davidkpiano/react-redux-form

Author: davidkpiano

src/components/control-component.js

@@ -470,31 +470,19 @@ function createControlClass(s = defaultStrategy) {
     }
 
     createEventHandler(eventName) {
-      const {
-        dispatch,
-        model,
-        updateOn,
-        validateOn = updateOn,
-        asyncValidateOn,
-        controlProps,
-        parser,
-        ignore,
-        withField,
-        fieldValue,
-      } = this.props;
-
       const eventAction = {
         focus: actions.silentFocus,
         blur: actions.blur,
       }[eventName];
 
-      const controlEventHandler = {
-        focus: controlProps.onFocus,
-        blur: controlProps.onBlur,
-        change: controlProps.onChange,
-      }[eventName];
-
       const dispatchBatchActions = (persistedEvent, forceUpdate = false) => {
+        const {
+          dispatch,
+          model,
+          updateOn,
+          validateOn = updateOn,
+        } = this.props;
+
         const eventActions = [
           eventAction && eventAction(model),
           (forceUpdate || containsEvent(validateOn, eventName))
@@ -509,6 +497,21 @@ function createControlClass(s = defaultStrategy) {
       };
 
       return (event, forceUpdate = false) => {
+        const {
+          asyncValidateOn,
+          controlProps,
+          parser,
+          ignore,
+          withField,
+          fieldValue,
+        } = this.props;
+
+        const controlEventHandler = {
+          focus: controlProps.onFocus,
+          blur: controlProps.onBlur,
+          change: controlProps.onChange,
+        }[eventName];
+
         if (containsEvent(ignore, eventName)) {
           return controlEventHandler
             ? controlEventHandler(event)

test/control-component-spec.js

@@ -1188,6 +1188,86 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('dynamic model', () => {
+      const initialState = getInitialState({
+        foo: 'initial',
+        bar: 'initial',
+      });
+      const store = testCreateStore({
+        test: modelReducer('test', initialState),
+        testForm: formReducer('test'),
+      });
+
+      class DynamicModelControl extends React.Component {
+        constructor() {
+          super();
+
+          this.state = { model: 'foo' };
+        }
+        render() {
+          const { model } = this.state;
+          return (
+            <div>
+              <button onClick={() => this.setState({ model: 'bar' })} />
+              <Control.text model={`test.${model}`} />
+            </div>
+          );
+        }
+      }
+
+      it('updates the proper field on change', () => {
+        const field = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <DynamicModelControl />
+          </Provider>
+        );
+
+        const control = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+        const button = TestUtils.findRenderedDOMComponentWithTag(field, 'button');
+
+        control.value = 'value1';
+        TestUtils.Simulate.change(control);
+
+        TestUtils.Simulate.click(button);
+
+        control.value = 'value2';
+        TestUtils.Simulate.change(control);
+
+        assert.equal(get(store.getState().test, 'foo'), 'value1');
+        assert.equal(get(store.getState().test, 'bar'), 'value2');
+      });
+
+      it('updates the proper form state of field on focus/blur', () => {
+        const field = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <DynamicModelControl />
+          </Provider>
+        );
+
+        const control = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+        const button = TestUtils.findRenderedDOMComponentWithTag(field, 'button');
+
+        TestUtils.Simulate.focus(control);
+        assert.equal(store.getState().testForm.foo.focus, true);
+        assert.equal(store.getState().testForm.bar.focus, false);
+
+        TestUtils.Simulate.blur(control);
+        assert.equal(store.getState().testForm.foo.focus, false);
+        assert.equal(store.getState().testForm.bar.focus, false);
+
+        TestUtils.Simulate.click(button);
+
+        TestUtils.Simulate.focus(control);
+        assert.equal(store.getState().testForm.foo.focus, false,
+          'Second field should be focused instead, we switched the model');
+        assert.equal(store.getState().testForm.bar.focus, true);
+
+        TestUtils.Simulate.blur(control);
+        assert.equal(store.getState().testForm.foo.focus, false);
+        assert.equal(store.getState().testForm.bar.focus, false);
+      });
+    });
+
     describe('updateOn prop', () => {
       const onEvents = [
         'change',