davidkpiano / react-redux-form

Create forms easily in React with Redux.
https://davidkpiano.github.io/react-redux-form
MIT License
2.06k stars 252 forks source link

Debounced onBlur return empty synthetic event #1146

Closed KrisCoulson closed 6 years ago

KrisCoulson commented 6 years ago

The Problem

I believe the issue is related to this commit which was merged in to 1.16.7 https://github.com/davidkpiano/react-redux-form/commit/0f4051206c4964648a9fde1215172615504e1d80

In fields without debounce onBlur returns the correct event, target, and value.

Fields with debounce return an empty synthetic event. It returns an event with no target or value.

In my use case specifically this raised an issue with a third party jQuery component where I was waiting for onBlur to update the value. The component was expecting a value of 'string or null' which was previously returned before 1.16.8 instead it now received and array proxy / synthetic event for the value instead of the input value.

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Code Example

https://codesandbox.io/s/kworn500mr

davidkpiano commented 6 years ago

Might just need to event.persist() the event. Can you try, and create a PR once you've found the fix? I'll be happy to review it and merge it in.

KrisCoulson commented 6 years ago

@davidkpiano I can take a deeper look into this when I get a chance. I did take a quick look although unfamiliar with the code but it seems that createEventHandler which processes and persist the event has already lost the correct event.

As well as

        this.handleBlur = (...args) => {
          this.handleUpdate.flush();
          oldHandleBlur.call(this, args);
        }

logging args here on line 141 returns the empty SyntheticFocusEvent.

I originally thought it was just an event.persist issue but looking into it looks like it should already be persisted and is being lost when overwriting this.handleBlur