fix: subMenu flicker (#497)

react-component · Nov 10, 2022 · e0e6375 · e0e6375
1 parent b296551
commit e0e6375
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git 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
@@ -46,6 +46,59 @@ describe('Menu.Collapsed', () => {
       );
     });
 
+    it('should always follow submenu popup hidden when mode is switched', () => {
+      const genMenu = props => (
+        <Menu mode="vertical" {...props}>
+          <SubMenu key="1" title="submenu1">
+            <SubMenu key="1-1" title="submenu1-1">
+              <MenuItem key="Option-1">Option 1</MenuItem>
+            </SubMenu>
+          </SubMenu>
+        </Menu>
+      );
+
+      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 => (
         <Menu defaultOpenKeys={['1']} mode="inline" {...props}>