react-redux-form icon indicating copy to clipboard operation
react-redux-form copied to clipboard

Bug: Production error on resolveModel on field blur

Open sadokmtir opened this issue 6 years ago • 2 comments

The Problem

I have a react-redux-form field that fires an error on production when the field loses focus.

TypeError: Cannot read property '0' of undefined at s (resolve-model.js:31) at n.value (resolve-model.js:62) at u (react-dom.production.min.js:130)

when I checked the model being passed to the control: when the field loses focus gets appended to 0 : userForm.postalCode.0.

My component having this configuration:

<Control
       component={Textbox.getNumericField}
       model={this.props.userForm.postalCode.model}
       maxLength={this.props.maxLength}
       placeholder={this.props.placeholder ? I18n.t(this.props.placeholder) : ''}
       tabIndex={this.props.tabIndex}
       disabled={this.props.disabled}
       onChange={this.props.onChange}
       onBlur={this.props.onBlur}
       updateOn={this.props.updateOn}
       debounce={DEBOUNCE_TIME}
     />

And the connect function is

const mapStateToProps = state => ({
  userForm: state.forms.userForm,
});

Notice : Happens only on production with npm run build --production.

Update: As intercepting the actions getting fired, I notices something weird on production that an action rrf/batch getting fired with a huge payload (24MB) . Here is a snippet from the value field:

{
  type: 'rrf/batch',
  model: 'userForm.postalCode',
  actions: [
    {
      type: 'rrf/blur',
      model: 'userForm.postalCode'
    },
    {
      type: 'rrf/change',
      model: 'userForm.postalCode',
      value: [
        {
          dispatchConfig: {
            phasedRegistrationNames: {
              bubbled: 'onBlur',
              captured: 'onBlurCapture'
            },
            dependencies: [
              'topBlur'
            ]
          },
          _targetInst: {
            tag: 5,
            key: null,
            type: 'input',
            stateNode: {
              __reactInternalInstance$lnrmmrliyu: '[CIRCULAR]',
              __reactEventHandlers$lnrmmrliyu: {
                maxLength: 5,
                placeholder: '',
                tabIndex: 1,
                disabled: false,
                name: 'userForm.postalCode',
                type: 'text',
                value: '56070'
              },
              _wrapperState: {
                initialValue: '',
                controlled: true
              },
              value: '56070',
              _valueTracker: {}
            },
            'return': {
              tag: 2,
              key: null,
              stateNode: { ...

bug

sadokmtir avatar Mar 20 '18 16:03 sadokmtir

Seems to occur after the oldHandleBlur change was implemented in 1.16.8 https://github.com/davidkpiano/react-redux-form/commit/0f4051206c4964648a9fde1215172615504e1d80

saschb2b avatar Mar 21 '18 15:03 saschb2b

If you know the probable fix, I'd be happy to pull in a PR.

davidkpiano avatar Mar 21 '18 22:03 davidkpiano