Closed KrisCoulson closed 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.
@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
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
Control.text
debounce={300}
updateOn="blur"
onBlur={e => console.log(e.target.value)}
e.target.value
will crash the DOM because the event has an empty target valueExpected Behavior
e.target.value
should return the value of the input.Actual Behavior
e.target.value
will crash the DOM because the event has an empty target value.Reproducible Code Example
https://codesandbox.io/s/kworn500mr