Redux-form-material-ui: Stateless function components cannot be given refs

[ketysek]

Hi, I'm using lib v. ^5.0.0-beta.1 and getting following error when I insert a text field:

Stateless function components cannot be given refs. Attempts to access this ref will fail.
Check the render method of ReduxFormMaterialUITextField.

What I'm doing wrong? Is it bug? My code is below:

import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'
import Button from 'material-ui/Button'
import { FormControlLabel } from 'material-ui/Form'
import { Switch, TextField } from 'redux-form-material-ui'

class UserForm extends Component {
  onSubmit(data) {
    this.props.onSubmitAction(data)
  }

  onCancelButtonClick() {
    const { handleRequestClose } = this.props
    if(handleRequestClose) {
      handleRequestClose()
    }
  }

  render() {
    const { handleSubmit } = this.props
    const isCreate = this.props.actionType === 'create'
    const isUpdate = this.props.actionType === 'modify'

    return (
      <Grid container alignItems='center' justify='center'>
        <Grid item xs={12}>  
          <Paper className="form in-drawer" elevation={ 0 }>
            { isCreate && <h3>Add a new User</h3> }
            { isUpdate && <h3>Modify user</h3> }
            <form autoComplete="off" onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
              <Field
                name="name"
                component={ TextField }
                label="Name *"
              />
              { isUpdate &&
                <FormControlLabel 
                  control={
                    <Field name="disabled" component={Switch} /> 
                  } 
                  label="Disabled" 
                />
              }
              <Typography type="button" className="button-area inverted">
                <Button className="submit" raised color="primary" type="submit"> 
                  {isCreate && 'Create'}
                  {isUpdate && 'Modify'}
                </Button>
                <Button className="back" raised color="default" onClick={ this.onCancelButtonClick.bind(this) }>
                  Cancel
                </Button>
              </Typography>
            </form>
          </Paper>
        </Grid>
      </Grid>
    )
  }
}

UserForm = reduxForm({
  form: 'UserForm',
  touchOnBlur: false
})(UserForm)

export default UserForm

[brennie]

I'm also running into this error, but my forms seem to be working.

[ketysek]

Yes, the form is working, but ... :)

[mihirsoni]

@ketysek What React version are you using ?

[ketysek]

@mihirsoni 16.0.0

[mihirsoni]

@ketysek

I have fixed this issue.
I'll make the release with next beta release. let me know if it is blocking in any case I would just release this fix.

Thank you for using beta. let us know if thee are any other issues you encountered.

[ketysek]

@mihirsoni currently I'm using only Switch from your library...when you assume to release the version with this bug fixed? :)

[mihirsoni]

I'll be release this in this weekend with next beta version.

Thanks you for your patience.

[mortezaalizadeh]

Having the same issue here, looking forward to have the new release soon, cheers

[aislanmaia]

The same issue here. Is it already released? Will demand some changes for the code? Thanks!

[mihirsoni]

Apologized for delay. This has been released with v5.0.0-beta-2 can be installed

You can get it now.

npm install --save redux-form-material-ui@next

Closing this, feel free to open if issue persist.

[aislanmaia]

For me the problem persists. Here is my bit of code that the console is getting "angry" about:

....some handlers above...

  renderEmailField = (field) => {
    const { classes } = this.props;
    return (
      <div className={classes.containerField}>
        <EditIcon className={classes.fieldIcon}/>
        <TextField
            type="email"
            style={{textIndent: 0}}
            label="Email"
            placeholder="Digite seu email"
            className={classes.textField}
            inputClassName={classes.input}
            InputProps={{
              endAdornment: this.handleEndAdornment(field),
              classes: this.handleClassesInput(field)
            }}
            autoFocus={true}
            error={field.meta.touched && field.meta.error ? !!field.meta.error : false}
            helperText={field.meta.touched && field.meta.error ? field.meta.error : ''}
            {...field.input}
        />
      </div>
    )
  }

  renderPasswordField = (field) => {
    const { classes } = this.props;
    return (
      <div className={classes.containerField}>
        <KeyIcon className={classes.fieldIcon}/>
        <TextField
            type="password"
            style={{textIndent: 0}}
            label="Senha"
            placeholder="Digite sua senha"
            className={classes.textField}
            inputClassName={classes.input}
            InputProps={{
              endAdornment: this.handleEndAdornment(field),
              classes:this.handleClassesInput(field)
            }}
            //autoFocus={true}
            error={field.meta.touched && field.meta.error ? !!field.meta.error : false}
            helperText={field.meta.touched && field.meta.error ? field.meta.error : ''}
            {...field.input}
        />
      </div>
    );
  }

and finally in my render() function:

<form onSubmit={handleSubmit(this._handleSubmit)}>
    <Field
        name="email"
        type="email"
        component={this.renderEmailField}
        label="Email"
        placeholder="Email"
     />
    <Field
        name="password"
        type="password"
        component={this.renderPasswordField}
        label="Senha"
     />
     <div className={classes.containerField}>
         <Button type="submit" raised color="primary" className={classes.button} disabled={submitting}>
             Entrar
         </Button>
      </div>
</form>

The warning on console:

The funny part is that when I had removed an attribute "ref" out of one of them fields instances, one warning equals the above one dissappeared, but thats remaining no matter what. So I think something is causing this bug again.