fix: SubMenu in React18 sync problem (#537)

Co-authored-by: huangkairan <[email protected]>

Author: huangkairan

src/Menu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import type { CSSMotionProps } from 'rc-motion';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
@@ -271,13 +272,18 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   });
 
   const triggerOpenKeys = (keys: string[]) => {
-    setMergedOpenKeys(keys);
+    // Prevent React18 auto batch since trigger openKeys on same time
+    // which makes mergedOpenKeys closure problem
+    flushSync(() => {
+      setMergedOpenKeys(keys);
+    });
     onOpenChange?.(keys);
   };
 
   // >>>>> Cache & Reset open keys when inlineCollapsed changed
-  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] =
-    React.useState(mergedOpenKeys);
+  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] = React.useState(
+    mergedOpenKeys,
+  );
 
   const isInlineMode = mergedMode === 'inline';
 
@@ -329,10 +335,9 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     [registerPath, unregisterPath],
   );
 
-  const pathUserContext = React.useMemo(
-    () => ({ isSubPathKey }),
-    [isSubPathKey],
-  );
+  const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [
+    isSubPathKey,
+  ]);
 
   React.useEffect(() => {
     refreshOverflowKeys(

tests/React18.spec.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
 import React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { sleep } from './util';
 import Menu, { MenuItem, SubMenu } from '../src';
 import type { MenuProps } from '../src';
 
@@ -55,5 +56,39 @@ describe('React18', () => {
         .querySelector('.rc-menu-submenu-title').textContent,
     ).toEqual('submenu1');
   });
+
+  it('prevent React 18 auto batch', async () => {
+    const handleOpenChange = jest.fn();
+    const { container } = render(
+      <Menu onOpenChange={handleOpenChange}>
+        <SubMenu title="s1">
+          <MenuItem key="1">1</MenuItem>
+        </SubMenu>
+        <SubMenu title="s2">
+          <MenuItem key="2">2</MenuItem>
+        </SubMenu>
+      </Menu>,
+    );
+
+    // Enter
+    fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
+    runAllTimer();
+    expect(container.querySelector('.rc-menu-submenu-open')).toBeTruthy();
+    // Leave
+    fireEvent.mouseLeave(container.querySelector('.rc-menu-submenu-title'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(container.querySelector('.rc-menu-submenu-open')).toBeFalsy();
+    await act(async () => {
+      await sleep();
+    });
+    // Enter
+    fireEvent.mouseEnter(
+      container.querySelectorAll('.rc-menu-submenu-title')[1],
+    );
+    jest.runAllTimers();
+    expect(container.querySelector('.rc-menu-submenu-open')).toBeTruthy();
+  });
 });
 /* eslint-enable */

tests/util.ts

@@ -1,3 +1,4 @@
+import { act } from '@testing-library/react';
 export function isActive(container: HTMLElement, index: number, active = true) {
   const checker = expect(container.querySelectorAll('li.rc-menu-item')[index]);
 
@@ -11,3 +12,13 @@ export function isActive(container: HTMLElement, index: number, active = true) {
 export function last(elements: NodeListOf<Element>) {
   return elements[elements.length - 1];
 }
+
+const globalTimeout = global.setTimeout;
+
+export const sleep = async (timeout = 0) => {
+  await act(async () => {
+    await new Promise(resolve => {
+      globalTimeout(resolve, timeout);
+    });
+  });
+};