Redux-form-material-ui: How do I use MUI Input component?

[ilyador]

How do I connect this form with redux-form?

"redux-form": "^7.2.0",
"redux-form-material-ui": "^5.0.0-beta.2"

<FormControl fullWidth>
  <InputLabel htmlFor={this.props.colorLabel}>{this.props.colorLabel}</InputLabel>
  <Input
    id={this.props.colorLabel}
    value={this.state.color.substr(1)}
    onChange={this.handleInputChange}
    startAdornment={<InputAdornment position="start">#</InputAdornment>}
    endAdornment={
      <InputAdornment position="end">
        <IconButton onClick={this.handleClick}>
          <div className={classes.color} style={{background: this.state.color}}/>
        </IconButton>
      </InputAdornment>
    }
  />
</FormControl>

[yvanwangl]

@ilyador In my option, if you want to connect form with redux-form, you should use redux-form's Field component. You can find use case in redux-form document.

[ilyador]

@yvanwangl I know, but Field supports full components like InputField, this is composed component which has all kinds of Material-UI inner components. It doesn't work simply putting it inside Field like you do with InputField etc.

[andreapier]

I'm facing the same issue.
Maybe we need a new component that wraps Input?

EDIT
After a bit more of thinking (and reading docs) I came out with this helper component:

file: InputAdapter

import React from "react";
import Input from "material-ui/Input";

const InputAdapter = props => <Input
    {...props}
    value={props.input.value}
    onChange={props.input.onChange} />;

export default InputAdapter;

Then, in your form:

import InputAdapter from "./InputAdapter";
...
<FormControl>
    <FormHelperText>My Input</FormHelperText>
    <Field
        name="email"
        component={InputAdapter}
        startAdornment={
            <InputAdornment position="start">
                <MailOutline />
            </InputAdornment>
         }
    />
</FormControl>
...

It works perfectly!
Hope this helps other people that are facing the same issue.

[peterbartos]

Why this is not directly part of the library as Input wrapper?