Redux-form-material-ui: v3 passes through bogus props to <input>, causing React to warn

[aldendaniels]

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

[erikras]

We will see what Material UI v0.15.2 does about this and react accordingly. They have already fixed this, but not yet released the fix. https://github.com/callemall/material-ui/issues/4594

[tyscorp]

material-ui v0.15.2 is now out with the fixes. :)

I'm still getting some unexpected props with redux-form-material-ui.

[estaub]

AFAICT, the Material-UI folks think that this is resolved in 15.2. See the release notes, https://github.com/callemall/material-ui/issues/4594, and pull requests 4603,4605,4607.

[oallouch]

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

[estaub]

The issues @oallouch referred to do not describe this particular problem, so I opened a new issue on material-ui: https://github.com/callemall/material-ui/issues/4722

[estaub]

The material-ui guys closed out https://github.com/callemall/material-ui/issues/4722 , pointing out that the properties being placed in aren't from them - which is of course true; they're redux-form properties. I'm guessing that this might actually be a redux-form bug - a corner case that the fixes for React 15.2 don't address. @aldendaniels doesn't say what version of redux-form that he's on, but I'm seeing it with 6.0.0-rc.3. If there's no feedback to the contrary within a day or two, I'll open a redux-form issue.

[timothyallan]

I seem to be only getting this with the ReduxFormMaterialUITextField component, all the other ones seem fine.

[estaub]

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)

[adamtal3]

I'm getting the warning when using SelectField or TextField (Checkbox seems to work for me):

import { SelectField } from 'redux-form-material-ui';
import { Field } from 'redux-form/immutable'

<Field component={SelectField} name="test1" floatingLabelText="Test">
        <MenuItem value={1} primaryText={'1'} />
        <MenuItem value={2} primaryText={'2'} />
</Field>

Results in:

Warning: Unknown props `active`, `asyncValidating`, `dirty`, `invalid`, `pristine`, `valid`, `visited` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by TextField)
    in TextField (created by SelectField)
    in SelectField (created by ReduxFormMaterialUISelectField)
    in ReduxFormMaterialUISelectField (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)

Using versions:

    "react": "15.2.1",
    "redux-form": "6.0.0-rc.3",
    "redux-form-material-ui": "3.0.0",

[estaub]

@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)
  }))

[adamtal3]

@estaub Thanks, your solution to both the TextField and SelectField worked for me and the warnings are gone.
Plus, It doesn't seem to break the validation and touched logic.

[tzapu]

hi guys, doing a npm install --save redux-form-material-ui@latest seems to have sorted this for me

[estaub]

@tzapu What version of redux-form are you using?

[tzapu]

@estaub hi, "redux-form": "^6.0.0-rc.4",
also latest currently
cheers

[m19]

I can confirm the warnings are gone for me. Here's the versions I use:

"react": "^15.2.0",
"material-ui": "^0.15.2",
"redux-form": "^6.0.0-rc.4",
"redux-form-material-ui": "^4.0.1",

Thanks for the hard work guys 👍

[estaub]

Ditto, works for me, fixes Checkbox, SelectField, TextField, Toggle.

[erikras]

Ok, closing this, then.