fix: fix popup flicker issue when inline menus have benn collased

docs/examples/antd.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import type { CSSMotionProps } from 'rc-motion';
-import Menu, { SubMenu, Item as MenuItem, Divider, MenuProps } from '../../src';
+import Menu, { SubMenu, Item as MenuItem, Divider } from '../../src';
+import type { MenuProps } from '../../src';
 import '../../assets/index.less';
 
 function handleClick(info) {

docs/examples/inlineCollapsed.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import Menu, { SubMenu, Item } from 'rc-menu';
 import './inlineCollapsed.less';
+import { inlineMotion } from './antd'
 
 const App = () => {
   const [collapsed, setCollapsed] = useState(false);
   return (
-    <>
+    <div style={{ height: 600 }}>
       <label>
         <input type="checkbox" value={collapsed} onChange={e => setCollapsed(e.target.checked)} />
         inlineCollapsed: {collapsed.toString()}
@@ -15,14 +16,19 @@ const App = () => {
         inlineCollapsed={collapsed}
         style={{ width: 600 }}
         className={collapsed ? 'collapsed' : ''}
+        motion={inlineMotion}
       >
         <Item key="1">item 1</Item>
         <SubMenu key="2" title={`inlineCollapsed: ${collapsed.toString()}`}>
           <Item key="3">item 2</Item>
           <Item key="4">item 3</Item>
+          <SubMenu key="5" title={`inlineCollapsed: ${collapsed.toString()}`} style={{ minWidth: 220 }}>
+            <Item key="6">item 4</Item>
+            <Item key="7">item 5</Item>
+          </SubMenu>
         </SubMenu>
       </Menu>
-    </>
+    </div>
   );
 }
 

src/Menu.tsx

@@ -598,7 +598,9 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
         <MenuContextProvider
           prefixCls={prefixCls}
           rootClassName={rootClassName}
+          originMode={mode}
           mode={internalMode}
+          inlineCollapsed={internalInlineCollapsed}
           openKeys={mergedOpenKeys}
           rtl={isRtl}
           // Disabled

src/SubMenu/PopupTrigger.tsx

@@ -75,10 +75,10 @@ export default function PopupTrigger({
   }
 
   const mergedMotion: CSSMotionProps = {
-    ...targetMotionRef.current,
-    leavedClassName: `${prefixCls}-hidden`,
-    removeOnLeave: false,
-    motionAppear: true,
+      ...targetMotionRef.current,
+      leavedClassName: `${prefixCls}-hidden`,
+      removeOnLeave: false,
+      motionAppear: true,
   };
 
   // Delay to change visible

src/SubMenu/index.tsx

@@ -80,6 +80,8 @@ const InternalSubMenu = (props: SubMenuProps) => {
   const {
     prefixCls,
     mode,
+    originMode,
+    inlineCollapsed,
     openKeys,
 
     // Disabled
@@ -272,14 +274,16 @@ const InternalSubMenu = (props: SubMenuProps) => {
 
   if (!overflowDisabled) {
     const triggerMode = triggerModeRef.current;
+    const canTriggerPopupVisible = originMode !== 'inline' || inlineCollapsed;
+    const visible = !internalPopupClose && open && mode !== 'inline' && canTriggerPopupVisible;
 
     // Still wrap with Trigger here since we need avoid react re-mount dom node
     // Which makes motion failed
     titleNode = (
       <PopupTrigger
         mode={triggerMode}
         prefixCls={subMenuPrefixCls}
-        visible={!internalPopupClose && open && mode !== 'inline'}
+        visible={visible}
         popupClassName={popupClassName}
         popupOffset={popupOffset}
         popupStyle={popupStyle}

src/context/MenuContext.tsx

@@ -17,7 +17,9 @@ export interface MenuContextProps {
   rtl?: boolean;
 
   // Mode
+  originMode: MenuMode;
   mode: MenuMode;
+  inlineCollapsed?: boolean;
 
   // Disabled
   disabled?: boolean;