fix: ScrollTo need wait for scroll item exist (#762)

* fix: scroll delay logic

* test: fix test case

Author: zombieJ

src/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts

@@ -1,5 +1,6 @@
 import { useEvent } from 'rc-util';
 import raf from 'rc-util/lib/raf';
+import isVisible from 'rc-util/lib/Dom/isVisible';
 import * as React from 'react';
 
 const SPEED_PTG = 1 / 3;
@@ -20,9 +21,12 @@ export default function useScrollTo(
     scrollingRef.current = false;
   };
 
+  const scrollRafTimesRef = React.useRef<number>();
+
   const startScroll = () => {
     const ul = ulRef.current;
     scrollDistRef.current = null;
+    scrollRafTimesRef.current = 0;
 
     if (ul) {
       const targetLi = ul.querySelector<HTMLLIElement>(`[data-value="${value}"]`);
@@ -31,16 +35,19 @@ export default function useScrollTo(
       const doScroll = () => {
         stopScroll();
         scrollingRef.current = true;
+        scrollRafTimesRef.current += 1;
 
         const { scrollTop: currentTop } = ul;
 
         const firstLiTop = firstLi.offsetTop;
         const targetLiTop = targetLi.offsetTop;
         const targetTop = targetLiTop - firstLiTop;
 
-        // Wait for element exist
-        if (targetLiTop === 0 && targetLi !== firstLi) {
-          scrollRafRef.current = raf(doScroll);
+        // Wait for element exist. 5 frames is enough
+        if ((targetLiTop === 0 && targetLi !== firstLi) || !isVisible(ul)) {
+          if (scrollRafTimesRef.current <= 5) {
+            scrollRafRef.current = raf(doScroll);
+          }
           return;
         }
 

tests/new-range.spec.tsx

@@ -19,6 +19,10 @@ import {
   waitFakeTimer,
 } from './util/commonUtil';
 
+jest.mock('rc-util/lib/Dom/isVisible', () => {
+  return () => true;
+});
+
 describe('NewPicker.Range', () => {
   beforeEach(() => {
     resetWarned();

tests/picker.spec.tsx

@@ -29,6 +29,10 @@ import {
 
 const fakeTime = getDay('1990-09-03 00:00:00').valueOf();
 
+jest.mock('rc-util/lib/Dom/isVisible', () => {
+  return () => true;
+});
+
 describe('Picker.Basic', () => {
   let errorSpy;
   beforeEach(() => {