React-dates: Let keydown events propagate to parent components

[venondev]

In our project, we are using the Datepicker component inside a customized modal. The modal is based on react-modal which has some nice features like a scoped focus or close on Escape. To have these features, react-modal listens to the onkeydown event and triggers functions depending on the key which is pressed. Unfortunately this doesn´t work when the focus of the keypress is on a field inside the Datepicker (single and range). With a look at the source code, the keyevent doesn´t propagate, because of e.stopPropagation() in the Daypicker component. This prevents our modal to close on Escape and prevents the scoped focus to work.

In conclusion, if the sites has keylisteners for any kind of key, the listeners won´t work if the focus is on a field inside the daypicker.

Could we remove the e.stopPropagation entirely or are there cases where this is necessary?

[ljharb]

It seems reasonable to only stop propagation when necessary - we could probably add some checking there.

[majapw]

I'll post this here as well

The main issue that this is trying to prevent is the propagation of the arrowkey/pageup/pagedown events to the top-level body element which causes undesired scroll behavior. Escape as well has its own meaning inside of the DayPicker so I'm not certain that we would want to make this change wholesale. I think that because the DayPicker has keyboard controls, it would be a bit odd to arbitrarily defer those to DOM elements up the tree.

In your case, escape does have specific behavior inside of the DayPicker component itself (related to the keyboard shortcuts panel). Maybe we could conditionally stop propagation for the cases that I listed?

[venondev]

Yes, I think this would be a good approach. I will update the PR accordingly.

[venondev]

Updated the PR to only stop ArrowKey/PageKey events.
https://github.com/airbnb/react-dates/pull/1275

[alex-goryachev]

Hey everybody. When will this PR be merged?