[BUG] - DatePicker/DateRangePicker: scrolling up and down on the MonthYearPicker not working properly

[barbu-vlad]

HeroUI Version

2.8.4

Describe the bug

When using the DatePicker or DateRangePicker component, the MonthYearPicker popup does not scroll correctly. Scrolling up or down to change the month or year either doesn’t respond as expected or behaves inconsistently.

Your Example Website or App

HeroUI docs

Steps to Reproduce the Bug or Issue

1.) Render a DatePicker or DateRangePicker component. 2.) Open the calendar dropdown. 3.) Click on the month/year header to open the MonthYearPicker view. 4.) Try to scroll up or down within the MonthYearPicker panel (mouse wheel or trackpad). 5.) Observe that scrolling is not functioning properly when chaning direction.

Expected behavior

Scrolling up should navigate to previous years/months, and scrolling down should navigate to next years/months, consistently and smoothly.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-2822

[wingkwong]

I couldn't reproduce the issue.

[barbu-vlad]

I couldn't reproduce the issue.

I can reproduce it every time (easier on year picker) if I scroll up & down multiple times very fast (not mandatory to scroll very fast but it's easier to reproduce this way)

https://github.com/user-attachments/assets/1bb9bb64-757a-4ba5-a974-a1aed86c126b I'm continously scrolling in this video

[wingkwong]

I'm a bit confused on the issue here. I can see the year is set correctly in the header in your vide. Also scrolling up and down can navigate to the correct year / month. Do you mind to elaborate with more details?

[barbu-vlad]

https://github.com/user-attachments/assets/17e8bd2d-5ee0-49fc-91ae-b3f4cb94aa21

I'm a bit confused on the issue here. I can see the year is set correctly in the header in your vide. Also scrolling up and down can navigate to the correct year / month. Do you mind to elaborate with more details?

In the attached video I was scrolling without stopping but at the same time the scroll on the year picker blocked multiple times. It's like the year list is losing the focus for a split second and the scroll stops.

[Stybo]

https://github.com/user-attachments/assets/2e54927e-72a8-4f8b-8660-9a45fe9893a6

I can't reproduce this issue aswell.

This might have something to do with the steps? As you can see the accessibility feature also doesn't match.

[adrianmanduc]

+1 I can also replicate what @barbu-vlad is experiencing. The issue happens when you try to scroll the years using a mouse with a scroll wheel. If you stop scrolling and start scrolling again ( or change the scroll direction) the scroll no longer works - you have to move the pointer and start scrolling again to make it work,

[ariansj01]

Documentation Fix Applied

I've identified and fixed the onFocusChange issue in the DateRangePicker presets example. The problem was that the example code only updated the start date, causing the end date to be lost.

Code Fix:

// Before (buggy):
onFocusChange: (val) => setValue({...value, start: val}),

// After (fixed):
onFocusChange: (val) => {
  if (val === "start") {
    setValue({...value, start: val});
  } else if (val === "end") {
    setValue({...value, end: val});
  }
},

Documentation Improvements:

• Added troubleshooting section with common issues
• Added examples for proper date range handling
• Added guidance for React import requirements
• Improved API documentation for onFocusChange

This should resolve the issue where users lose the end date selection when using onFocusChange. The documentation now includes comprehensive troubleshooting guidance to help developers avoid this common pitfall.

PR: #5798