Redux-form: Input loses focus after a single "keyDown" event

Created on 17 Aug 2016 · 3Comments · Source: redux-form/redux-form

Using v6.0.0-rc.4 with the Material-UI library. We are using ImmutableJS, so I thought I would try out the version 6 with Immutable built in.

Definitely a noob at using Redux-form, so I probably should not jump in on the most cutting-edge version. However, the library seems to take care of several things that can be a hassle in other settings. I have all of my validation and everything working fine, but want to see if this library can make it easier to reason about across our entire app.

When my input field has an onChange, the field loses focus after entering a single character...specifically when the key is initially pressed. I know that redux-form works onBlur, but using that instead of onChange seems to do nothing different.

Below, the DescriptiveTextField you see is just a decorative wrapper for the MUI TextField component.

Thanks for any help in these untested waters for me! 😄

renderCCForm() {
    const CCDetails = this.props.accountCreditCardDetails;

    const ccField = ({ input, label, type, meta: { touched, error } }) => (
      <DescriptiveTextField
        errorText={touched ? error : ''}
        floatingLabelText="Credit Card Number"
        onChange={this.handleUpdateCreditCardInfo}
        value={formatCCNumber(CCDetails.get('CardNumber'), CCDetails.get('Type'))}
        width="224px"
        {...input}
      />
    );

    return (
      <div>
        <Field
          component={ccField}
          name="ccNumber"
          type="text"
        />
     .........and so on

Source

m2mathew

Most helpful comment

You're creating a new function in each render. You need to move the component definition outside of the render function.

const CCField = ({ input, label, type, meta: { touched, error } }) => (
  <DescriptiveTextField
    errorText={touched ? error : ''}
    floatingLabelText="Credit Card Number"
    onChange={this.handleUpdateCreditCardInfo}
    value={formatCCNumber(CCDetails.get('CardNumber'), CCDetails.get('Type'))}
    width="224px"
    {...input}
  />
);

renderCCForm() {
    const CCDetails = this.props.accountCreditCardDetails;

    return (
      <div>
        <Field
          component={CCField}
          name="ccNumber"
          type="text"
        />
    )
}

You should also probably be using the format function in place of formatting the value within the field. See http://redux-form.com/6.0.0-rc.4/docs/ValueLifecycle.md/.

clayne11 on 18 Aug 2016

👍11

All 3 comments

You're creating a new function in each render. You need to move the component definition outside of the render function.

const CCField = ({ input, label, type, meta: { touched, error } }) => (
  <DescriptiveTextField
    errorText={touched ? error : ''}
    floatingLabelText="Credit Card Number"
    onChange={this.handleUpdateCreditCardInfo}
    value={formatCCNumber(CCDetails.get('CardNumber'), CCDetails.get('Type'))}
    width="224px"
    {...input}
  />
);

renderCCForm() {
    const CCDetails = this.props.accountCreditCardDetails;

    return (
      <div>
        <Field
          component={CCField}
          name="ccNumber"
          type="text"
        />
    )
}

You should also probably be using the format function in place of formatting the value within the field. See http://redux-form.com/6.0.0-rc.4/docs/ValueLifecycle.md/.

clayne11 on 18 Aug 2016

👍11

Found that this issue is also referenced here back in June 2016...just in case some wayward traveler ends up here one day.

m2mathew on 23 Aug 2016

😄1

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.