the selected option will be restored to unselected status - redux-form

Question

3sec Demo https://www.youtube.com/watch?v=bo2nNQXbhI8&feature=youtu.be
https://gist.github.com/weichenghsu/407a8862f3382a425fb531b3dedcd6f5
As title, the selected option will be restored to unselected status
And onChange method has no effect for the official tutorial example.
My use case is that when a user picks a value from the dropdown. It should fire an action to fetch other data and render on another form
const chooseTable = ({items, meta:{touched, error}}) => (
<select
onChange={event => {
console.log(this.props.fields);
this.props.tableNameOnChange(event.target.value);
}}>
<option value="">Select</option>
{
items.map((item :any, i: integer) =>
<option key={item.id} value={item.id}>{item.name}</option>
)
}
</select>
)
<Field component={chooseTable}
items={schemaData.tableList}
name="tableName"
>
{/*<option value="#ff0000">Red</option>*/}
{/*<option value="#00ff00">Green</option>*/}
{/*<option value="#0000ff">Blue</option>*/}
</Field>
UIBuilderForm = reduxForm({
form: 'dashbaordUiBuilderForm',
fields: ['tableName']
}
})
(UIBuilderForm as any);
// Decorate with connect to read form values
const selector = formValueSelector('dashbaordUiBuilderForm')
// export default connect(mapStateToProps, mapDispatchToProps)(UIBuilderForm);
export default connect(state => {
const TableSchemaName = selector(state, 'TableSchemaName')
return {
TableSchemaName
}
}

Answer 1

I was banging my head on a similar issue with the react-native picker. Try writing your 'chooseTable' as a component instead of a stateless function and use 'this.state' and 'this.setState' to refer to what value is selected. Here's an example from my picker code:
class ExpirePicker extends React.Component {
constructor(props) {
super(props)
this.state = {
selected: 'ASAP'
}
}
render() {
const { input: { onChange, ...rest }} = this.props
return (
<Picker
style={style.input}
selectedValue={this.state.selected}
onValueChange={(value) => {
this.setState({selected: value})
onChange(value)
}}
{...rest}>
{Object.keys(ExpireTypes).map(renderItem)}
</Picker>
)
}
}
Could you also be using the element's "onChange" event and not binding it to redux-forms "onChange" prop?