title: redux-form unable to type values in fields
body: <p>I'm not able to type values in input fields using redux-form. I have the following reducer</p>
  
  <pre><code>import {combineReducers} from 'redux';
  import session from './sessionReducer';
  import profile from './profileReducer';
  import map from './mapReducer';
  import { reducer as formReducer } from 'redux-form'
  
  const rootReducer = combineReducers({
      // short hand property names
      session,
      profile,
      map,
      form: formReducer
  })
  
  export default rootReducer;
  </code></pre>
  
  <p>and here is the store</p>
  
  <pre><code>import { createStore, combineReducers, applyMiddleware } from 'redux'
  import createLogger from 'redux-logger'
  import thunk from 'redux-thunk'
  import { routerReducer, routerMiddleware, push } from 'react-router-redux'
  import reducers from '../reducers'
  import { browserHistory } from 'react-router';
  
  const middleware = [ thunk ];
  if (process.env.NODE_ENV !== 'production') {
      middleware.push(createLogger());
  }
  
  middleware.push(routerMiddleware(browserHistory));
  
  
  // Add the reducer to your store on the `routing` key
  const store = createStore(
      combineReducers({
          reducers,
          routing: routerReducer
      }),
      applyMiddleware(...middleware),
  
  )
  
  export default store;
  </code></pre>
  
  <p>component</p>
  
  <pre><code>import React, {PropTypes, Component} from 'react';
  import Upload from './Upload';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import * as profileActions from '../../../actions/profileActions';
  import EventsCalendar from '../../common/EventsCalendar';
  import { Field, reduxForm } from 'redux-form'
  import ProfileForm from './ProfileForm';
  
  import {
      Form,
      FormGroup,
      FormControl,
      ControlLabel,
      Tabs,
      Tab,
      InputGroup,
      Label,
      HelpBlock,
      Grid,
      Row,
      Button,
      Col
  
  } from 'react-bootstrap';
  
  
  class Profile extends Component {
  
      static propTypes = {
          profile: PropTypes.object.isRequired,
      };
  
      constructor(props) {
          super(props);
  
          this.state = {
              profile: {
                  username: '',
                  password: '',
                  email: ''
              }
          }
          //this.onUpdate = this.onUpdate.bind(this)
      }
  
      handleSubmit = (values) =&gt; {
          // Do something with the form values
          console.log(values);
      }
  
      componentDidMount() {
          this.props.actions.getProfile()
      }
  
      componentWillReceiveProps(nextProps) {
          if (nextProps.profile !== this.props.profile) {
  
          }
      }
  
      render() {
          console.log(this.props.profile);
          const {profile} = this.props.profile;
          const { handleSubmit } = this.props;
  
          return (
              &lt;div className="row"&gt;
                  &lt;Col lg={10}&gt;
                      &lt;Tabs defaultActiveKey={1} id="uncontrolled-tab-example"&gt;
                          &lt;Tab eventKey={1} title="Vendor Data"&gt;
                              &lt;ProfileForm onSubmit={this.handleSubmit}  data = {this.props.profile}/&gt;
                          &lt;/Tab&gt;
                          &lt;Tab eventKey={3} title="Events Calendar"&gt;
                              &lt;EventsCalendar/&gt;
                          &lt;/Tab&gt;
                      &lt;/Tabs&gt;
  
                  &lt;/Col&gt;
  
                  &lt;Col lg={2}&gt;
                      &lt;Upload/&gt;
                  &lt;/Col&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
  
      return {
          profile: state.default.profile,
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(profileActions, dispatch)
      };
  }
  
  Profile = reduxForm({
      form: 'profileForm' // a unique name for this form
  })(Profile);
  
  export default connect(mapStateToProps, mapDispatchToProps)(Profile);
  </code></pre>
  
  <p>when I'm typing I see in console that the state is changing</p>
  
  <p><a href="https://i.stack.imgur.com/wtODZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wtODZ.png" alt="enter image description here"></a></p>
  
  <p>the attached form component </p>
  
  <pre><code>import React, {Component} from 'react';
  import {Field, reduxForm} from 'redux-form';
  import FieldFormControl from '../../common/FieldFormControl';
  
  import {
      FormGroup,
      FormControl,
      ControlLabel,
      Button
  
  } from 'react-bootstrap';
  
  class ProfileForm extends Component {
      render() {
          const {handleSubmit, profile, pristine, reset, submitting} = this.props;
  
          return (
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;FormGroup controlId="signup-name"&gt;
                      &lt;Field type="text" name="firsname" placeholder="test" value component={FieldFormControl}&gt;Vorname&lt;/Field&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup controlId="signup-username"&gt;
                      &lt;Field type="text" name="lastname" placeholder={profile.username} value={profile.username} component={FieldFormControl}&gt;Name&lt;/Field&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup controlId="signup-email"&gt;
                      &lt;Field type="text" name="email" placeholder={profile.username} value={profile.username} component={FieldFormControl}&gt;Vorname&lt;/Field&gt;
                  &lt;/FormGroup&gt;
  
                  &lt;Button
                      bsStyle="primary"
                      type="submit"
                      //disabled={pristine || submitting}
                      block
                  &gt;Speichern&lt;/Button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  // Decorate the form component
  ProfileForm = reduxForm({
      form: 'profileForm' // a unique name for this form
  })(ProfileForm);
  
  export default ProfileForm;
  </code></pre>
  
  <p>the bootstrap override to be compatible with redux-form</p>
  
  <pre><code>import React, { Component } from 'react';
  import {FormGroup, FormControl, ControlLabel} from 'react-bootstrap';
  
  export default class FieldFormControl extends Component {
  
      render () {
  
          const { placeholder, type, input, meta} = this.props;
  
          return (
              &lt;FormGroup controlId={input.name} validationState={meta.error ? 'error' : 'success'}&gt;
                  &lt;ControlLabel&gt;{this.props.children}&lt;/ControlLabel&gt;
                  &lt;FormControl type={type} placeholder={placeholder} value={input.value} onChange={input.onChange} /&gt;
                  &lt;FormControl.Feedback /&gt;
              &lt;/FormGroup&gt;
          );
      }
  }
  </code></pre>