Selection in scrollable year dropdown fails when current year scrolls out of view

[mschoc]

Describe the bug
With scrollableYearDropdown={true}, choosing a different year often fails when the currently selected year is no longer visible in the dropdown. Selecting a visible year works when the current year is still visible. Otherwise, the selection does nothing or reverts to the previous value.

To Reproduce
Steps to reproduce the behavior:

1. Use DatePicker with showYearDropdown and scrollableYearDropdown={true}.
2. Open the year dropdown.
3. Scroll so the currently selected year (e.g. 2026) is no longer visible.
4. Click another year that is visible (e.g. 2014).
5. Observe that the selection does not apply or reverts back.

Expected behavior
The clicked year is selected and the dropdown closes with that year chosen.

Actual behavior
The selection does not change and stays on the previous year.

Cause
In year_dropdown_options.tsx, a ref callback calls el?.focus() on the selected option when it renders. If that option is off-screen, focus() triggers an implicit scroll. That scroll conflicts with the user’s click and either:

• Changes the layout so the click lands on the wrong element, or
• Occurs during the click handling so the selection is ignored or rolled back.

Workaround
Calling el?.focus({ preventScroll: true }) instead of el?.focus() avoids the scroll and fixes the issue. Because there is no prop to control this, we apply the change at build time via webpack’s string-replace-loader on the react-datepicker dist files.

Environment

• react-datepicker: 9.1.0
• Chrome 145 and Firefox 148.0.2

Screenshots
https://github.com/user-attachments/assets/41750204-7f13-4919-a8bf-6f591accdda0