title: Update value of a "Field" based on some selection on different screen
body: <h3>Problem:</h3>
  
  <p>I am trying to update the value of a redux-form field based of some selection on a different screen from where the field is.</p>
  
  <p>What I am doing is:</p>
  
  <p>1) Show a form with a <code>TouchableOpacity</code>. It is given the styling of a dropdown (this is the <code>registeredField</code>)</p>
  
  <p>2) Click on that button and you get redirected to a list view</p>
  
  <p>3) Click on one item from the list</p>
  
  <p>4) You are redirected back</p>
  
  <p>5) The placeholder should change to the selection done on the previous screen</p>
  
  <hr>
  
  <p>What happens is:</p>
  
  <p>If I click on the dropdown (touchable opacity button) directly and come back the value doesn't get updated. But as soon as I change input for any of the other fields - the label changes immediately. The same also works if I have something in one of the other inputs and then I do the selection - the label changes as expected.</p>
  
  <h3>My Attempt:</h3>
  
  <p>To show the label what I am doing is preparing an <code>initialValues</code> object and passing it down to the component which renders the form in order to show the label appropriately:</p>
  
  <h3>The field component:</h3>
  
  <pre><code>....
  &lt;TouchableOpacity onPress={openPicker}&gt;
    &lt;Text&gt;{groupName || 'Select Group'}&lt;/Text&gt;
  &lt;/TouchableOpacity&gt;
  ....
  </code></pre>
  
  <h3>The form field within a <code>reduxForm</code> connected component:</h3>
  
  <pre><code>&lt;Field
      name="groupName"
      placeholder="Group"
      groupPicker // to render the picker or a normal input box
      groupName={groupName} // the value used as placeholder
      openGroupPicker={openGroupPicker}
      component={FormInput}
   /&gt;
   ....
   const connectedDriverForm = reduxForm({
      form: 'driverForm',
      validate,
      enableReinitialize: true,
   })(DriverForm);
  </code></pre>
  
  <h3>The form within the container where the <code>initialvalues</code> prop is passed:</h3>
  
  <pre><code>const {
    subhaulerPhone,
    subhaulerEmail,
    groupName,
  } = this.props;
  const initialValues = {
    subhaulerPhone,
    subhaulerEmail,
    groupName,
  };
  // within render()
  &lt;DriverForm
      initialValues={initialValues}
      openGroupPicker={this.handleOpenGroupPicker}
      onDriverFormSubmit={this.handleDriverFormSubmit}
      onCancel={this.closeDriverForm}
  /&gt;
  </code></pre>
  
  <p>I tried to tap into the <code>change</code> event of redux-form:</p>
  
  <pre><code>export default connect(
    mapStateToProps,
    {
      ...mapDispatchToProps,
      saveGroupName: groupName =&gt; change('driverForm', 'groupName', groupName),
    },
  )(UserManagementForm);
  </code></pre>
  
  <hr>
  
  <p>I used the <code>initialValues</code> prop so that the picker shows proper label on selection and also loads and saves the form properly whenever the screen is changed.</p>
  
  <p>I have an action to save the form values and to set the group name:</p>
  
  <pre><code>import { pathOr } from 'ramda';
  import { createStructuredSelector } from 'reselect';
  import {
    initialState,
    SAVE_FORM_VALUES,
    SET_GROUP_NAME,
    CLEAR_GROUP_NAME,
    CLEAR_FORM_VALUES,
  } from './usermanagementform.constants';
  
  export const userManagementFormSelector = createStructuredSelector({
    subhaulerPhone: pathOr('', ['userManagementForm', 'subhaulerPhone']),
    subhaulerEmail: pathOr('', ['userManagementForm', 'subhaulerEmail']),
    groupName: pathOr('', ['userManagementForm', 'groupName']),
    subhaulerFormValues: pathOr({}, ['form', 'driverForm', 'values']),
  });
  
  export const userManagementFormReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case SAVE_FORM_VALUES:
        return {
          ...state,
          ...action.data,
        };
      case CLEAR_FORM_VALUES:
        return {
          subhaulerPhone: '',
          subhaulerEmail: '',
          groupName: '',
        };
      case SET_GROUP_NAME:
        return {
          ...state,
          groupName: action.groupName,
        };
      case CLEAR_GROUP_NAME:
        return {
          ...state,
          groupName: '',
        };
      default:
        return state;
    }
  };
  </code></pre>
  
  <hr>
  
  <p>All my attempts have been futile so far. This is an edge case, and I cannot seem to understand why this doesn't work or what doesn't work.</p>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thanks.</p>
  
  <p>Resource Used: </p>
  
  <ul>
  <li><p><a href="https://github.com/erikras/redux-form/issues/2496" rel="nofollow noreferrer">https://github.com/erikras/redux-form/issues/2496</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/41809474/redux-form-update-field-value-from-external-interaction">Redux-Form update field value from external interaction</a></p></li>
  <li><p><a href="https://redux-form.com/7.1.2/docs/api/actioncreators.md/" rel="nofollow noreferrer">https://redux-form.com/7.1.2/docs/api/actioncreators.md/</a></p></li>
  </ul>