the selected option will be restored to unselected status

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?