Required SelectField does not show errorText about redux-form-material-ui

[stunaz]

Can't reproduce. Its working fine.

[JeffreyATW]

@prawana-perera This is an issue with Material UI. The SelectField's onBlur hooks don't seem to work properly, so there's no way to hook into Redux Form and tell it that the field has been touched.

[stunaz]

@JeffreyATW Indeed

[prawana-perera]

Thanks for your response. Yes, there are some open issues in material-ui around this. Closing issue.

[otajor]

@prawana-perera @JeffreyATW any workaround for this? Did you end up using another component? Or manually setting the touched field somehow?

[JeffreyATW]

Nope, still waiting for Material-UI "next" to be released.

[mattste]

I also ran into this today. A few possible workarounds:

1. Set touchOnChange to true. I believe the downside of this is that if any value in your form changes, the field will be marked as touched. You may not want that behavior.

2. Pass a custom onChange function that will be called (alongside the standard change dispatch) when the SelectField changes. This was added recently in P/R #50.

Solution:

class MyForm extends Component {
  render() {
    const { changeWithTouch } = this.props
    return (
      <Field name="mySelect" component={SelectField} onChange={(val) => changeWithTouch('mySelect', val, true /* touched prop */)}>
        <MenuItem value="Option 1" primaryText="Option 1" />
      </Field>
    )
  }
}

let MyForm = reduxForm({
  form: 'myForm',
})(MyForm)

const changeWithTouch = (field, val, touch) => change('myForm', field, val, touch)
const mapDispatchToProps = (dispatch) => (bindActionCreators({ changeWithTouch }, dispatch))
MyForm = connect(undefined, mapDispatchToProps)(MyForm)

Unfortunately, the bound action creators passed to your redux-form do not allow for setting the touched property (see: https://github.com/erikras/redux-form/blob/ac3b6da74b6939f621b7e4c659eec0af451395d9/src/reduxForm.js#L526). You can only set it through the method described above. Ideally, we could do something like this:

class MyForm extends Component {
  render() {
    const { change } = this.props
    return (
      <Field name="mySelect" component={SelectField} onChange={(val) => change('mySelect', val, true /* touched prop */)}>
        <MenuItem value="Option 1" primaryText="Option 1" />
      </Field>
    )
  }
}

let MyForm = reduxForm({
  form: 'myForm',
})(MyForm)

If @erikras thinks it's okay to allow the redux-form bound action creators to pass in a touch parameter that overrides the touchOnChange, then I'll submit a P/R in the redux-form repo.

Hope this helps @oturnermajor