diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx index c86681e4..231e6ac1 100644 --- a/src/SubMenu/index.tsx +++ b/src/SubMenu/index.tsx @@ -262,8 +262,10 @@ const InternalSubMenu = (props: SubMenuProps) => { // Cache mode if it change to `inline` which do not have popup motion const triggerModeRef = React.useRef(mode); - if (mode !== 'inline') { - triggerModeRef.current = connectedPath.length > 1 ? 'vertical' : mode; + if (mode !== 'inline' && connectedPath.length > 1) { + triggerModeRef.current = 'vertical'; + } else { + triggerModeRef.current = mode; } if (!overflowDisabled) { diff --git a/tests/Collapsed.spec.js b/tests/Collapsed.spec.js index 7ccbfa43..417228cc 100644 --- a/tests/Collapsed.spec.js +++ b/tests/Collapsed.spec.js @@ -46,6 +46,59 @@ describe('Menu.Collapsed', () => { ); }); + it('should always follow submenu popup hidden when mode is switched', () => { + const genMenu = props => ( + + + + Option 1 + + + + ); + + const { container, rerender } = render(genMenu()); + + // Hover submenu1 + fireEvent.mouseEnter( + container.querySelectorAll('.rc-menu-submenu-title')[0], + ); + + act(() => { + jest.runAllTimers(); + }); + act(() => { + jest.runAllTimers(); + }); + + // Hover submenu1-1 + fireEvent.mouseEnter( + container.querySelectorAll('.rc-menu-submenu-title')[1], + ); + + act(() => { + jest.runAllTimers(); + }); + act(() => { + jest.runAllTimers(); + }); + + rerender(genMenu({ mode: 'inline' })); + + // Click submenu1 + fireEvent.click(container.querySelectorAll('.rc-menu-submenu-title')[0]); + // Click submenu1-1 + fireEvent.click(container.querySelectorAll('.rc-menu-submenu-title')[2]); + + act(() => { + jest.runAllTimers(); + }); + + expect(container.querySelectorAll('.rc-menu-submenu')[3]).toHaveClass( + 'rc-menu-submenu-hidden', + ); + }); + it('should always follow openKeys when inlineCollapsed is switched', () => { const genMenu = props => (