can't type in input fields when using material-ui-redux-form due to re rendering

Question

I'm using material-ui with redux. For some reason I can't type in my input fields whenever I follow the example provided at http://redux-form.com/6.2.0/examples/material-ui/ .

After using chrome redux dev tool I noticed that the state of the inputs is changing when I type but then it's re-rendering the entire component whenever something is typed, which makes it seem like nothing is being typed. Oddly enough, this only occurs when I use the Field component, as is used in the examples. If I just use material-ui components, the form allows typing and it doesn't re render. I've included the entire code to my component. Any help is much appreciated! What am I doing wrong?

import React, { Component } from 'react'
import {Field, reduxForm} from 'redux-form'
import { TextField } from 'redux-form-material-ui'
import RaisedButton from 'material-ui/RaisedButton'

class Login extends Component {
  constructor (props) {
    super(props)
    this.handleFormSubmit = this.handleFormSubmit.bind(this)
  }
  componentDidMount () {
    console.log(this.refs)
    this.refs.username        // the Field
      .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
      .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
      .focus()                // on TextField
  }
  handleFormSubmit ({ username, password }) {
    console.log(username, password)
  }
  render () {
    const {
      handleSubmit,
      pristine,
      submitting,
      input,
      fields: { username, password }
    } = this.props
    return (
      <div className='loginWrapper'>
        <form onSubmit={handleSubmit(this.handleFormSubmit)}>
          <div id='loginNotch' />
          <h1 className='loginHeader'>Login</h1>
          <div>
            <Field
              component={TextField}
              name='username'
              floatingLabelText='Username'
              ref='username' withRef />
          </div>
          <div>
            <Field
              component={TextField}
              type='password'
              name='password'
              floatingLabelText='Password'
              ref='password' withRef />
          </div>
          <div>
            <RaisedButton
              label='Go'
              primary />
          </div>
        </form>
      </div>
    )
  }
}

// TODO: keep property names consistent with server
export default reduxForm({
  form: 'login',
  fields: ['username', 'password']
})(Login)

Update: I took a look at the docs and removed fields from the export, and it is still not working.

You can clone project from here https://bitbucket.org/kvoth3/loanpayments.git it's just a simple login screen

jpdelatorre · Accepted Answer · 2016-11-22 00:23:25Z

1

Try changing your reducer to

const rootReducer = combineReducers({
  form: authReducer
})

ReduxForm expects your redux state structure to be

{
   form: {
      formName: {}
   }
}

If you need to use a different name other than form, you need to provide a getFormState(state) to the reduxForm() decorator.

answered Nov 22, 2016 at 0:23

jpdelatorre

3,6031 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dalvacoder Over a year ago

dude...thank you so much!! i spent a whole day debugging this.

jpdelatorre Over a year ago

glad to be of help

Collectives™ on Stack Overflow

can't type in input fields when using material-ui-redux-form due to re rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related