Material-ui: Redux-form compatibility on v1

[gfpacheco]

Versions

• Material-UI: next
• React: 15.6.1
• Browser: Chrome 59

When using redux-form with the new v1-alpha version, the redux-form is unable to get the values from material-ui's inputs:

https://www.webpackbin.com/bins/-KorfXdnqS-bH-LFUgpl

[augustoody]

I've been using v1-alpha with the redux-form and it's working for me. I use as the example in the redux-form docs.

https://www.webpackbin.com/bins/-Koro25DoPn0ydR0K2jG

[stunaz]

hmm that is a redux-form thing, you have to configure each type of field like @AugustoOdy did

[gfpacheco]

I thought that with v1 we could drop the redux-form-material-ui. But instead we need a new version of it as well.

[oliviertassinari]

Personally, I have been using the following wrapper. It's a small adapter.

RFTextField.js

import React from 'react'
import PropTypes from 'prop-types'
import TextField from 'material-ui/TextField'

function RFTextField(props) {
  const { autoComplete, input, meta: { touched, error }, ...other } = props

  return (
    <TextField
      error={Boolean(touched && error)}
      {...input}
      {...other}
      inputProps={{
        autoComplete,
      }}
      helperText={touched ? error : ''}
    />
  )
}

RFTextField.propTypes = {
  autoComplete: PropTypes.string,
  input: PropTypes.object.isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.string,
  }).isRequired,
}

export default RFTextField

@gfpacheco Yes, it makes sense to update the redux-form-material-ui adapter project for the new version so we can have an even simpler experience.

[HriBB]

@oliviertassinari how can we use the new <Select> with redux-form?

[gfpacheco]

@HriBB While redux-form-material-ui still don't fully support v1 (I'm working on a PR) you can use my version of it:

npm install --save @gfpacheco/[email protected]

[oliviertassinari]

@HriBB It's the same API as a native select.