React-dates: Synthetic event warning onKeyDown

[JemarJones]

With the latest version of the daterangepicker i get the following warnings logged if i for example click into the start date input, type something and hit cmd + A.

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `stopPropagation` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

printWarning    @   warning.js?8a56:36
warning @   warning.js?8a56:60
warn    @   SyntheticEvent.js?2535:265
get @   SyntheticEvent.js?2535:259
onKeyDown   @   DateInput.js?2f69:265
invokeFunc  @   index.js?f580:160
trailingEdge    @   index.js?f580:207
timerExpired    @   index.js?f580:195

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `key` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

printWarning    @   warning.js?8a56:36
warning @   warning.js?8a56:60
warn    @   SyntheticEvent.js?2535:265
get @   SyntheticEvent.js?2535:259
onKeyDown   @   DateInput.js?2f69:272
invokeFunc  @   index.js?f580:160
trailingEdge    @   index.js?f580:207
timerExpired    @   index.js?f580:195

I notice that you're throttling the onKeyDown event handler, so it may be that the event is nullified by the time the handler is actually called, as described here http://stackoverflow.com/questions/35435074/using-debouncer-with-react-event. This makes sense to me as the warning is being thrown on the trailing edge of the throttle.

[JemarJones]

I can confirm that modifying the source and setting the trailing to false does fix the issue. I believe this would result in onKeyDown only being called on the leading edge. Another possible solution would be wrapping the call to the throttled handler and persisting the event.

Either fix would be pretty simple so i could make a PR if someone could confirm which solution seems better.

[basarat]

Verified incident report in our code base :rose::

[mikelambert]

I just stumbled on this warning message in my codebase, and tracked it down to react-dates.

Yes, wrapping and persisting the event is fully compatible with existing behavior. But I'd probably prefer the trailing: false solution, since these key events are used for navigation, and it'd be nice to not do an additional navigation when you let go of a key.

I'm not sure if anyone's reading your bug report and offer of help, so just submitting a PR and gathering feedback, is probably the best way to get your question answered. Are you interested in doing that @JemarJones , or should I?

[cecton]

I'm not 100% sure it is related but I have the problem in 14.0.0 14.1.0 and 13.0.6 by simply pressing SHIFT+TAB to switch to the next field. I have a lot of fields on my page and I want to navigate to the next one.

Nothing special in my code, I just inserted your component today with all the default parameters of the example. I tested on Firefox 56.

"Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method stopPropagation on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information." warning.js:33
printWarning warning.js:33
warning warning.js:57
warn SyntheticEvent.js:266
get SyntheticEvent.js:260
onKeyDown DateInput.js:383
invokeFunc debounce.js:95
trailingEdge debounce.js:142
timerExpired debounce.js:130

[Magellol]

@cecton Experiencing the same issue. shift+tab to switch from one input to another fields triggers the warning. I'm in chrome 62.

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method stopPropagation on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information