Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TimePicker panel will keep scrolling after selecting a time. #48899

Open
jtzcode opened this issue May 13, 2024 · 4 comments
Open

TimePicker panel will keep scrolling after selecting a time. #48899

jtzcode opened this issue May 13, 2024 · 4 comments

Comments

@jtzcode
Copy link

jtzcode commented May 13, 2024

Reproduction link

https://stackblitz.com/edit/react-gbhomy?file=demo.tsx

Steps to reproduce

For rc-picker used by TimePicker, I found the code below in useScrollTo.ts seemed to be buggy. After selecting a time from the time panel, the panel ul will scroll to the target li position. But when the target li is reaching top, the scrolling is not stopped, causing the scroll event could not be triggered on mouse-wheel scrolling.

// Break if dist get larger, which means user is scrolling
if (scrollDistRef.current !== null && scrollDistRef.current < dist) {
  stopScroll();
  return;
}
scrollDistRef.current = dist;

When the scenario above happens, the scrollDistRef.current is always equal to dist. So the stopScroll will be never called.
As I observed, on the latest Chrome, the scroll event can be fired even if the scrolling is not stopped. But the scroll event not triggered on older version Chrome (like v89) in this case.

What is expected?

The scrolling should be stopped when the target li reaches top and no longer sets the scrollTop of ul.

What is actually happening?

The scrolling is not stopped and keeping setting the scrollTop to the same value, which will have side effect on my component.

Environment Info
antd 5.15.1
React 16.8
System Windows 11
Browser Chrome 124

I tried to changed the termimal condition as below, the scrolling is stopped and can be scrolled manually again:

if (scrollDistRef.current !== null && (scrollDistRef.current < dist || Math.abs(scrollDistRef.current - dist) < Number.EPSILON)) {
  stopScroll();
  return;
}

That is, to stop scrolling when scrollDistRef and dist is equal (dist does not change anymore).

Copy link

stackblitz bot commented May 15, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@MadCcc
Copy link
Member

MadCcc commented May 15, 2024

Could you give a video of this bug?

@jtzcode
Copy link
Author

jtzcode commented May 17, 2024

Could you give a video of this bug?

@MadCcc Sure. After selecting a time, the target time will scroll to top, then the scroll will never stop. (I pressed F8 to continue debug, the break points never stopped)

picker-demo.mp4

@jtzcode
Copy link
Author

jtzcode commented May 18, 2024

@MadCcc Could you help to confirm whether it is a bug or any suggestions? Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants