1

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);

1 Answer 1

3

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>
    );
  }
}
Sign up to request clarification or add additional context in comments.

3 Comments

it make working but placeholder remains even after text insertation
Just to be sure please change it to: inputRef={inputRef} {...inputProps} inputProps={{...input}} />
inputRef is for ref of react. It working fine after adding value in custom input like value={input?input.value:null}. Thanks for your kind help sir.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.