Redux form in custom input of material ui not working

Question

I am working in material ui and react where i have custom input. I am using redux form for validation of a form. Redux form is successful for @redux-form/INITIALIZE and @redux-form/REGISTER_FIELD however onBlur, onFocus event are not dispatching. If i changed component of Field to something like <Field name="email" component="input" /> it will work but it is not working in React Material UI custom input.

CustomInput:

class CustomInput extends React.Component {
  render() {
      const { classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}

CustomInput.propTypes = {
    classes: PropTypes.object.isRequired,
    labelText: PropTypes.node,
    labelProps: PropTypes.object,
    id: PropTypes.string,
    inputProps: PropTypes.object,
    formControlProps: PropTypes.object,
    meta:PropTypes.object,
    error: PropTypes.bool,
    success: PropTypes.bool
}

export default withStyles(customInputStyle)(CustomInput);

Add User Form:

const required = value => (value == null ? 'Required' : undefined)
class AddUser extends React.Component {

    handleSubmit(event){
        event.preventDefault();
        console.log("Hello")
    }

    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                 <Field
                    name="email"
                    component={CustomInput}
                    label="Email"  validate={required} formControlProps=
                    {{fullWidth:true}}  
                  />
               </form>
          </div>)
       }
   }

export default reduxForm({
    form: 'add-user-form',
    initialValues: {
        email: ''
    },
})(AddUser);

Dennie de Lange Dennie de Lange · Accepted Answer · 2018-02-11T10:20:54

Field supplies you an input prop with all properties that you need to pass down to your input field. Something like this:

class CustomInput extends React.Component {
  render() {
      const { input, classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputProps={{...input}}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}

Redux form in custom input of material ui not working

1 Answers