fix: scroll on open (#157)

* fix: scroll on open

* test: Add test case

Author: zombieJ

package.json

@@ -44,7 +44,7 @@
     "dayjs": "^1.8.30",
     "moment": "^2.24.0",
     "rc-trigger": "^5.0.4",
-    "rc-util": "^5.0.1",
+    "rc-util": "^5.4.0",
     "shallowequal": "^1.1.0"
   },
   "engines": {
@@ -76,7 +76,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
-    "typescript": "^4.0.2"
+    "typescript": "^3.9.0"
   },
   "cnpm": {
     "mode": "npm"

src/panels/TimePanel/TimeUnitColumn.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { useRef, useLayoutEffect } from 'react';
 import classNames from 'classnames';
-import { scrollTo } from '../../utils/uiUtil';
+import { scrollTo, waitElementReady } from '../../utils/uiUtil';
 import PanelContext from '../../PanelContext';
 
 export interface Unit {
@@ -19,35 +20,35 @@ export interface TimeUnitColumnProps {
 }
 
 function TimeUnitColumn(props: TimeUnitColumnProps) {
-  const {
-    prefixCls,
-    units,
-    onSelect,
-    value,
-    active,
-    hideDisabledOptions,
-  } = props;
+  const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
   const cellPrefixCls = `${prefixCls}-cell`;
   const { open } = React.useContext(PanelContext);
 
-  const ulRef = React.useRef<HTMLUListElement>(null);
-  const liRefs = React.useRef<Map<number, HTMLElement | null>>(new Map());
+  const ulRef = useRef<HTMLUListElement>(null);
+  const liRefs = useRef<Map<number, HTMLElement | null>>(new Map());
+  const scrollRef = useRef<Function>();
 
   // `useLayoutEffect` here to avoid blink by duration is 0
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const li = liRefs.current.get(value!);
     if (li && open !== false) {
       scrollTo(ulRef.current!, li.offsetTop, 120);
     }
   }, [value]);
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (open) {
       const li = liRefs.current.get(value!);
       if (li) {
-        scrollTo(ulRef.current!, li.offsetTop, 0);
+        scrollRef.current = waitElementReady(li, () => {
+          scrollTo(ulRef.current!, li.offsetTop, 0);
+        });
       }
     }
+
+    return () => {
+      scrollRef.current?.();
+    };
   }, [open]);
 
   return (
@@ -58,15 +59,15 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
       ref={ulRef}
       style={{ position: 'relative' }}
     >
-      {units!.map(unit => {
+      {units!.map((unit) => {
         if (hideDisabledOptions && unit.disabled) {
           return null;
         }
 
         return (
           <li
             key={unit.value}
-            ref={element => {
+            ref={(element) => {
               liRefs.current.set(unit.value, element);
             }}
             className={classNames(cellPrefixCls, {

src/utils/uiUtil.ts

@@ -1,9 +1,32 @@
 import KeyCode from 'rc-util/lib/KeyCode';
+import raf from 'rc-util/lib/raf';
+import isVisible from 'rc-util/lib/Dom/isVisible';
 import { GenerateConfig } from '../generate';
 import { CustomFormat, PanelMode, PickerMode } from '../interface';
 
 const scrollIds = new Map<HTMLElement, number>();
 
+/** Trigger when element is visible in view */
+export function waitElementReady(element: HTMLElement, callback: () => void): () => void {
+  let id: number;
+
+  function tryOrNextFrame() {
+    if (isVisible(element)) {
+      callback();
+    } else {
+      id = raf(() => {
+        tryOrNextFrame();
+      });
+    }
+  }
+
+  tryOrNextFrame();
+
+  return () => {
+    raf.cancel(id);
+  };
+}
+
 /* eslint-disable no-param-reassign */
 export function scrollTo(element: HTMLElement, to: number, duration: number) {
   if (scrollIds.get(element)) {

tests/picker.spec.tsx

@@ -823,4 +823,47 @@ describe('Picker.Basic', () => {
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
   });
+
+  describe('time picker open to scroll', () => {
+    let domMock: ReturnType<typeof spyElementPrototypes>;
+    let canBeSeen = false;
+    let triggered = false;
+
+    beforeAll(() => {
+      domMock = spyElementPrototypes(HTMLElement, {
+        offsetParent: {
+          get: () => {
+            if (canBeSeen) {
+              return {};
+            }
+            canBeSeen = true;
+            return null;
+          },
+        },
+        scrollTop: {
+          get: () => 0,
+          set: () => {
+            triggered = true;
+          },
+        },
+      });
+    });
+
+    afterAll(() => {
+      domMock.mockRestore();
+    });
+
+    it('work', () => {
+      jest.useFakeTimers();
+      const wrapper = mount(
+        <MomentPicker picker="time" defaultValue={getMoment('2020-07-22 09:03:28')} open />,
+      );
+      jest.runAllTimers();
+
+      expect(triggered).toBeTruthy();
+
+      jest.useRealTimers();
+      wrapper.unmount();
+    });
+  });
 });