Parsing initial value if parsed value differs from initial value. Fixes #379

Author: davidkpiano

src/components/control-component.js

@@ -45,12 +45,25 @@ class Control extends Component {
   }
 
   componentWillMount() {
-    const { modelValue } = this.props;
+    const {
+      model,
+      modelValue,
+      parser,
+      dispatch,
+    } = this.props;
     const { onLoad } = this.state.mappedProps;
 
     if (onLoad) {
       onLoad(modelValue);
     }
+
+    if (parser) {
+      const parsedValue = parser(modelValue);
+
+      if (parsedValue !== modelValue) {
+        dispatch(actions.change(model, parsedValue));
+      }
+    }
   }
 
   componentWillReceiveProps(nextProps) {

test/field-parser-spec.js

@@ -7,55 +7,83 @@ import { Provider } from 'react-redux';
 import { modelReducer, formReducer, Field } from '../src';
 
 describe('<Field parser={...} />', () => {
-  const store = createStore(combineReducers({
-    test: modelReducer('test', { foo: '' }),
-    testForm: formReducer('test', { foo: '' }),
-  }));
+  context('standard usage', () => {
+    const store = createStore(combineReducers({
+      test: modelReducer('test', { foo: '' }),
+      testForm: formReducer('test', { foo: '' }),
+    }));
 
-  const parseValue = val => ({
-    data: val,
-  });
+    const parseValue = val => ({
+      data: val,
+    });
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field
+          model="test.foo"
+          parser={parseValue}
+          validators={{
+            isParsed: (val) => val
+              && val.data
+              && val.data === 'parse test',
+          }}
+        >
+          <input type="text" />
+        </Field>
+      </Provider>
+    );
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+    it('should parse the changed values given a parser function', () => {
+      const expected = { data: 'foo' };
+
+      input.value = 'foo';
+
+      TestUtils.Simulate.change(input);
 
-  const field = TestUtils.renderIntoDocument(
-    <Provider store={store}>
-      <Field
-        model="test.foo"
-        parser={parseValue}
-        validators={{
-          isParsed: (val) => val
-            && val.data
-            && val.data === 'parse test',
-        }}
-      >
-        <input type="text" />
-      </Field>
-    </Provider>
-  );
-
-  const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
-
-  it('should parse the changed values given a parser function', () => {
-    const expected = { data: 'foo' };
-
-    input.value = 'foo';
-
-    TestUtils.Simulate.change(input);
-
-    assert.deepEqual(
-      store.getState().test.foo,
-      expected);
+      assert.deepEqual(
+        store.getState().test.foo,
+        expected);
+    });
+
+    it('should parse before validation', () => {
+      input.value = 'parse test';
+
+      assert.isFalse(
+        store.getState().testForm.fields.foo.validity.isParsed,
+        'should not be valid yet');
+
+      TestUtils.Simulate.change(input);
+
+      assert.isTrue(
+        store.getState().testForm.fields.foo.validity.isParsed);
+    });
   });
 
-  it('should parse before validation', () => {
-    input.value = 'parse test';
+  it('should parse the initial value immediately', () => {
+    const store = createStore(combineReducers({
+      test: modelReducer('test', { foo: 'initial' }),
+      testForm: formReducer('test', { foo: 'initial' }),
+    }));
+
+    const parseValue = val => val.toUpperCase();
+
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field
+          model="test.foo"
+          parser={parseValue}
+        >
+          <input type="text" />
+        </Field>
+      </Provider>
+    );
 
-    assert.isFalse(
-      store.getState().testForm.fields.foo.validity.isParsed,
-      'should not be valid yet');
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
 
-    TestUtils.Simulate.change(input);
+    assert.equal(input.value, 'INITIAL');
 
-    assert.isTrue(
-      store.getState().testForm.fields.foo.validity.isParsed);
+    assert.equal(store.getState().test.foo, 'INITIAL');
   });
 });