From b6475d632a579d0e7625b1c6da4fb861321b5ffb Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 6 May 2021 18:31:16 +0800
Subject: [PATCH 1/2] fix: mode switch motion

---
 src/SubMenu/index.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx
index 6caec568..98ed2011 100644
--- a/src/SubMenu/index.tsx
+++ b/src/SubMenu/index.tsx
@@ -267,18 +267,28 @@ const InternalSubMenu = (props: SubMenuProps) => {
     </div>
   );
 
-  if (mode !== 'inline' && !overflowDisabled) {
+  // Cache mode if it change to `inline` which do not have popup motion
+  const triggerModeRef = React.useRef(mode);
+  if (mode !== 'inline') {
+    triggerModeRef.current = mode;
+  }
+
+  if (!overflowDisabled) {
+    const triggerMode = triggerModeRef.current;
+
     titleNode = (
       <PopupTrigger
-        mode={mode}
+        mode={triggerMode}
         prefixCls={subMenuPrefixCls}
-        visible={!internalPopupClose && open}
+        visible={!internalPopupClose && open && mode !== 'inline'}
         popupClassName={popupClassName}
         popupOffset={popupOffset}
         popup={
-          <SubMenuList id={popupId} ref={popupRef}>
-            {children}
-          </SubMenuList>
+          <MenuContextProvider mode={triggerMode}>
+            <SubMenuList id={popupId} ref={popupRef}>
+              {children}
+            </SubMenuList>
+          </MenuContextProvider>
         }
         disabled={mergedDisabled}
         onVisibleChange={onPopupVisibleChange}

From f00e5ced8512a9159cba21201393862fde0869f1 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 6 May 2021 20:12:21 +0800
Subject: [PATCH 2/2] chore: Add comment

---
 src/SubMenu/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx
index 98ed2011..1d045793 100644
--- a/src/SubMenu/index.tsx
+++ b/src/SubMenu/index.tsx
@@ -276,6 +276,8 @@ const InternalSubMenu = (props: SubMenuProps) => {
   if (!overflowDisabled) {
     const triggerMode = triggerModeRef.current;
 
+    // Still wrap with Trigger here since we need avoid react re-mount dom node
+    // Which makes motion failed
     titleNode = (
       <PopupTrigger
         mode={triggerMode}