Integrating react-redux, react-final-form and react-bootstrap-typeahead

Question

I'm trying to setup react-boostrap-typeahead to get data from the redux store, and have the typeahead state be stored with react-final-form. The problem is that react-bootstrap-typeahead has more than one piece of state attached to it, both which need tracking for this setup to work.

1. The text input state
2. The selected option

My preferred approach to solving this problem involves final-form-set-field-data and is illustrated here: https://codesandbox.io/s/rl81o5765o

That code will not work correctly because the Form component is not aware of changes to a field's data. Is there a better approach to solving this issue?

Answer 1

I came up with a solution here:

https://codesandbox.io/s/5m4w2909k

The approach is to introduce a withKeyword HoC that makes use of final-form-set-field-data to inject a keyword and updateKeyword props to the field. A Typeahead must be connected to the redux store individually.