redux-form-material-ui: v3 passes through bogus props to , causing React to warn

The new version fixes https://github.com/erikras/redux-form-material-ui/issues/10, but caused react to start warning of unexpected props passed to <input>:

This is because material-ui passes through unexpected props to the underlying <input> element. I think the fix is to black-list non-standard props from being passed through to material UI:

active
asyncValidating
dirty
invalid
pristine
valid
visited

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 17 (2 by maintainers)

Most upvoted comments

@adamtal3 For SelectField, I’m using:

import SelectField from 'material-ui/SelectField'
import createComponent from 'redux-form-material-ui/lib/createComponent'
import mapError from 'redux-form-material-ui/lib/mapError'

export default createComponent(
  SelectField,
  ({
    input: { onChange, ...inputProps },
    active, asyncValidating, dirty, invalid, pristine, valid, visited,
    ...props
  }) => ({
    ...mapError(props),
    ...inputProps,
    onChange: (event, index, value) => onChange(value)
  }))

estaub on Jul 28, 2016

The following src/TextField.js patch seems to work for me, but I’m very inexperienced in this area and might easily be breaking the behavior of some flag or other - hence no patch request.

function textMapError(
  { active, asyncValidating, dirty, invalid, pristine, valid, visited, ...props }
  ) {
  return mapError(props)
}

export default createComponent(TextField, textMapError)

estaub on Jul 26, 2016

don’t worry, they know it’s not. https://github.com/callemall/material-ui/issues/4670 https://github.com/callemall/material-ui/issues/4668

oallouch on Jul 13, 2016