fix: 修复 popup 滚动事件执行时机问题 (#1870)

Tencent · Jan 10, 2023 · 25be9eb · 25be9eb
1 parent 26b23a8
commit 25be9eb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/_util/usePrevious.ts → src/hooks/usePrevious.ts b/src/_util/usePrevious.ts → src/hooks/usePrevious.ts
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 
+// 缓存上一次的 state 用于前后比较
 export default function usePrevious<T>(state: T): T | undefined {
   const ref = useRef<T>();
 

diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -7,6 +7,7 @@ import { Placement } from '@popperjs/core';
 import useControlled from '../hooks/useControlled';
 import useAnimation from '../_util/useAnimation';
 import useConfig from '../hooks/useConfig';
+import usePrevious from '../hooks/usePrevious';
 import { TdPopupProps } from './type';
 import Portal from '../common/Portal';
 import useTrigger from './hooks/useTrigger';
@@ -61,6 +62,7 @@ const Popup = forwardRef((props: PopupProps, ref: React.RefObject<PopupRef>) =>
   const { keepExpand, keepFade } = useAnimation();
   const { height: windowHeight, width: windowWidth } = useWindowSize();
   const [visible, onVisibleChange] = useControlled(props, 'visible', props.onVisibleChange);
+  const prevVisible = usePrevious(visible);
 
   const [popupElement, setPopupElement] = useState(null);
   const triggerRef = useRef(null); // 记录 trigger 元素
@@ -112,8 +114,10 @@ const Popup = forwardRef((props: PopupProps, ref: React.RefObject<PopupRef>) =>
   // 下拉展开时更新内部滚动条
   useEffect(() => {
     if (!triggerRef.current) triggerRef.current = getTriggerDom();
-    visible && updateScrollTop?.(contentRef.current);
-  }, [visible, updateScrollTop, getTriggerDom]);
+    if (prevVisible !== visible && visible) {
+      updateScrollTop?.(contentRef.current);
+    }
+  }, [visible, prevVisible, updateScrollTop, getTriggerDom]);
 
   function handleExited() {
     !destroyOnClose && popupElement && (popupElement.style.display = 'none');