Revert "fix: SubMenu in React18 sync problem (#537)" (#540)

This reverts commit 0cf3d90.

Author: afc163

src/Menu.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { flushSync } from 'react-dom';
 import type { CSSMotionProps } from 'rc-motion';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
@@ -272,18 +271,13 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   });
 
   const triggerOpenKeys = (keys: string[]) => {
-    // Prevent React18 auto batch since trigger openKeys on same time
-    // which makes mergedOpenKeys closure problem
-    flushSync(() => {
-      setMergedOpenKeys(keys);
-    });
+    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';
 
@@ -335,9 +329,10 @@ 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,7 +1,6 @@
 /* eslint-disable no-undef */
 import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
-import { sleep } from './util';
+import { act, render } from '@testing-library/react';
 import Menu, { MenuItem, SubMenu } from '../src';
 import type { MenuProps } from '../src';
 
@@ -56,39 +55,5 @@ 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,4 +1,3 @@
-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]);
 
@@ -12,13 +11,3 @@ 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);
-    });
-  });
-};