From 7049848de4acda87b170d0fe96ed2522624adbe7 Mon Sep 17 00:00:00 2001
From: Season Chen <season.chen.i@foxmail.com>
Date: Tue, 22 Jun 2021 13:21:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=9E=E6=A0=B9=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=97=B6=E6=B2=A1=E6=9C=89=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

现在，Dropdown有一个bug，如果触发滚动的元素在一个可以滚动的div内，div滚动时dropdown的位置不会更新。
虽然现在有一个getPopupContainer的属性，但是这个属性局限性很大，比如有下面两个问题：
一：zIndex的问题，如果dropdown的popup在div内，有时候会被遮挡。
二：多层滚动嵌套时。

解决方法：监听所有的滚动事件, 只要是trgger的父元素滚动，就重新定位。
这里使用事件捕获而不是事件冒泡，因为滚动事件不会冒泡到根元素。
---
 src/Align.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/Align.tsx b/src/Align.tsx
index e621863..f034249 100644
--- a/src/Align.tsx
+++ b/src/Align.tsx
@@ -141,6 +141,30 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
       cancelForceAlign();
     }
   }, [disabled]);
+  
+  // listen scroll event
+  const scrollObserveRef = React.useRef<{ remove: () => void }>();
+  React.useEffect(() => {
+    const element = getElement(target);
+    if (!element) return;
+    const listener = e => {
+      if (typeof e.target.contains === 'function') {
+        if (e.target.contains(element)) {
+          forceAlign();
+        }
+      }
+    };
+    window.addEventListener('scroll', listener, true);
+    scrollObserveRef.current = {
+      remove: () => {
+        window.removeEventListener('scroll', listener);
+      },
+    };
+    return () => {
+      scrollObserveRef.current && scrollObserveRef.current.remove();
+      scrollObserveRef.current = null;
+    };
+  }, [target]);
 
   // Listen for window resize
   const winResizeRef = React.useRef<{ remove: Function }>(null);