From 94200fb580a04e0e1283c5c077c4a6cd8a59af72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 15 Jun 2022 14:21:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(Menu):=20=E8=8A=82=E7=82=B9=E7=9A=84?=
 =?UTF-8?q?=E5=AD=90=E7=BA=A7=E8=8A=82=E7=82=B9=E6=97=A0=E6=B3=95=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=20#822=20(#852)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-menu/src/Menu.tsx    |  2 ++
 packages/react-menu/src/SubMenu.tsx | 45 +++++++++++++++--------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/react-menu/src/Menu.tsx b/packages/react-menu/src/Menu.tsx
index ab7080d9ee..a45c2f4478 100644
--- a/packages/react-menu/src/Menu.tsx
+++ b/packages/react-menu/src/Menu.tsx
@@ -20,7 +20,9 @@ export interface MenuProps extends IProps, HTMLUlProps {
   bordered?: boolean;
 }
 interface MenuContextType {
+  // 需要加上或者减去的高度
   height: number;
+  // 事件源dom
   ele: EventTarget | null;
 }
 export const ThemeContext = createContext(
diff --git a/packages/react-menu/src/SubMenu.tsx b/packages/react-menu/src/SubMenu.tsx
index 46f7c9afe6..e24f6df64b 100644
--- a/packages/react-menu/src/SubMenu.tsx
+++ b/packages/react-menu/src/SubMenu.tsx
@@ -74,18 +74,21 @@ export const SubMenu = React.forwardRef(function <Tag extends TagType = 'a'>(
   };
   const popupRef = React.useRef<OverlayTriggerRef>(null);
   const refNode = React.useRef<HTMLElement | null>();
-  const currentHeight = React.useRef<number>(0);
   const elementSource = React.useRef<EventTarget | null>();
   const [isOpen, setIsOpen] = useState(!!overlayProps.isOpen);
   const { height, setContextHeight, ele } = useContext(ThemeContext);
 
   React.useEffect(() => {
     if (refNode.current && refNode.current.style && ele === elementSource.current) {
-      const currentHeight = refNode.current!.style.height;
-      if (height + 'px' === currentHeight) return;
-      refNode.current!.style.height = Number(currentHeight.substr(0, currentHeight.length - 2)) + height + 'px';
+      const currentHeight = Number(refNode.current!.style.height.substr(0, refNode.current!.style.height.length - 2));
+      // 设置的高度 < '已有展开的高度',
+      if (refNode.current!.getBoundingClientRect().height < currentHeight) {
+        refNode.current!.style.height = currentHeight + 'px';
+      } else {
+        refNode.current!.style.height = currentHeight + height + 'px';
+      }
     }
-  }, [height]);
+  }, [height, ele]);
 
   useMemo(() => {
     if (collapse) setIsOpen(false);
@@ -101,23 +104,12 @@ export const SubMenu = React.forwardRef(function <Tag extends TagType = 'a'>(
       }
     }
   }
-  function onExit(node: HTMLElement) {
-    node.style.height = `${node.scrollHeight}px`;
-    setIsOpen(false);
-  }
-  function onExiting(node: HTMLElement) {
-    node.style.height = '0px';
-    setContextHeight({
-      height: -currentHeight.current,
-      ele: elementSource.current!,
-    });
-  }
   function onEnter(node: HTMLElement) {
-    node.style.height = '1px';
+    node.style.height = '0px';
+    refNode.current = node;
     setIsOpen(true);
-    currentHeight.current = popupRef.current!.overlayDom.current!.getBoundingClientRect().height;
     setContextHeight({
-      height: currentHeight.current,
+      height: popupRef.current!.overlayDom.current!.getBoundingClientRect().height,
       ele: elementSource.current!,
     });
   }
@@ -126,9 +118,20 @@ export const SubMenu = React.forwardRef(function <Tag extends TagType = 'a'>(
   }
   function onEntered(node: HTMLElement) {
     // node.style.height = 'initial';
-    node.style.height = currentHeight.current + 'px';
-    refNode.current = node;
+    node.style.height = popupRef.current!.overlayDom.current!.getBoundingClientRect().height + 'px';
+  }
+  function onExiting(node: HTMLElement) {
+    node.style.height = '0px';
+    setContextHeight({
+      height: -popupRef.current!.overlayDom.current!.getBoundingClientRect().height,
+      ele: elementSource.current!,
+    });
+  }
+  function onExit(node: HTMLElement) {
+    node.style.height = `${node.scrollHeight}px`;
+    setIsOpen(false);
   }
+
   if (!collapse) {
     delete menuProps.onClick;
     menuProps.bordered = false;