Selected Text Not Appearing when Using Redux Form

Version

React: 16.4.1 react-bootstrap-typeahead: 3.2.1 reactstrap: 6.3.1 redux-form: 7.4.2 redux: 4.0.0

Steps to reproduce

When the <TypeAhead /> compotent is nested in the <Field component form redux-form it causes an issue. The drop down list works perfectly, I select an item and the label doesn’t appear in the input field. The data is set in the Redux state however, so that part is working. I can see it with the Redux DevTools.

Below is the code that causes this issue:

<Field  name="jobSpec"
  component={this.renderTypeAheadField.bind(this)}
  placeholder="Please enter a collector name"
/>

renderTypeAheadField = ({ input, meta, ...rest }) => (
  <span>
    <Typeahead
      className={meta.touched && meta.error ? 'alert-danger' : ''}
      {...input}
      {...rest}
      labelKey="description"
      options={this.props.searchData}
      valueKey="id"
      clearButton
    />
    { meta.touched && meta.error && <FormFeedback tooltip >{meta.error}</FormFeedback>}
  </span>
);

Expected Behavior

I would expect the input field to show the selected text as it does when not used with Redux-Form.

Actual Behavior

When one makes a selection the selected item does not appear in the input field. However the selected item can be seen in the state using Redux DevTools, so the selection is working, the input field is just not populating.

[blazestudios23]

@ericgio Change selected as you specified above handled the issue of having to click twice.

The issue still persists when you delete a character, but I believe that is being caused by Redux emptying out the state. Which does make sense for Redux to do, however it’s not desirable in this case.

Best,

Andrew

[ericgio]

@blazestudios23: It sounds to me like Redux Form is updating state in a way that resets the component’s selections. As mentioned above, I’m unfamiliar with how Redux Form works, so I can’t provide much help here, only guess at the underlying issue. In any case, this doesn’t seem like a bug in the typeahead so I would recommend filing an issue with Redux Form or asking on StackOverflow, where others might be able to help.

One last note: Not sure if this will make a difference, but if this.props.jobSpec doesn’t exist, you should just return an empty array rather than an object with a blank description:

selected={this.props.jobSpec || []}