Date Picker Dialog incorrectly scrolls page to the top

[stowball]

In both my custom implementation and in the example in the docs (https://react-day-picker.js.org/guides/input-fields#example-date-picker-dialog), when the date picker is conditionally rendered in a dialog and the page is scrollable, pressing the button to open the picker, incorrectly scrolls the page to the top in both Chrome and Firefox (tested on Mac and Android).

This also only happens on the first press of the button that opens the dialog.

I have tried not conditionally rendering the widget, but this presents additional challenges with returning focus, and my attempts didn't always focus the date on subsequent opens of the dialog.

Steps to reproduce:

1. Open https://react-day-picker.js.org/guides/input-fields#example-date-picker-dialog at a maximum window size of 1196px
2. Scroll down and press the "Pick a date" button.

Actual result:

The page scrolls to the top

Expected result:

Focus and scroll position to be locked on the date picker dialog.

[gpbl]

That example is a bit outdated and may need some refresh. I cannot replicate this issue anyway, could you provide more details?

[stowball]

Hmmm I'm not sure how you're unable to replicate. All you have to do is have a scrollable page with the date picker in a dialog. Below are screen recordings in Chrome on Mac and in Chrome on Android.

date-picker-dialog-chrome-mac.mp4

date-picker-dialog-chrome-android.mp4

If the example is outdated, what should it be? Because my design system uses this example as a foundation, so consumers experience this same bug.

[gpbl]

That example is using react-popper - has already given me some headache. I need to update it.

From a quick analysis, it looks like that react-popper is opening the popover at the absolute top position of the page. Then, it reposition it close to the input field.

While this happened, the autoFocus prop already autofocused the calendar: being it still on the top of the page, the browser scrolls it to the top to make visible the focused elements. (The next time it opens correctly without scrolling, which make me think react-popper has already its positioning calculated).

Try to use an alternative to react-popper, such as the native HTML dialog element, and/or to remove the autoFocus prop. Meanwhile I'll look to update the example...