fix: overflowed submenu should have classes with customized class (#42692)

components/menu/__tests__/index.test.tsx

@@ -8,12 +8,13 @@ import {
 import React, { useMemo, useState } from 'react';
 import type { MenuProps, MenuRef } from '..';
 import Menu from '..';
+import { TriggerMockContext } from '../../../tests/shared/demoTestContext';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render } from '../../../tests/utils';
-import Layout from '../../layout';
 import initCollapseMotion from '../../_util/motion';
 import { noop } from '../../_util/warning';
+import Layout from '../../layout';
 
 Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {
   writable: true,
@@ -824,7 +825,7 @@ describe('Menu', () => {
     const onOpen = jest.fn();
     const onClose = jest.fn();
     const Demo: React.FC = () => {
-      const menuProps = useMemo<MenuProps>(() => ({ onOpen, onClose }) as MenuProps, []);
+      const menuProps = useMemo<MenuProps>(() => ({ onOpen, onClose } as MenuProps), []);
       return (
         <Menu
           {...menuProps}
@@ -859,7 +860,7 @@ describe('Menu', () => {
   it('should keep selectedKeys in state when collapsed to 0px', () => {
     jest.useFakeTimers();
     const Demo: React.FC<MenuProps> = (props) => {
-      const menuProps = useMemo<MenuProps>(() => ({ collapsedWidth: 0 }) as MenuProps, []);
+      const menuProps = useMemo<MenuProps>(() => ({ collapsedWidth: 0 } as MenuProps), []);
       return (
         <Menu
           mode="inline"
@@ -1099,4 +1100,27 @@ describe('Menu', () => {
       '0',
     );
   });
+
+  it('Overflow indicator className should not override menu class', () => {
+    const { container } = render(
+      <TriggerMockContext.Provider value={{ popupVisible: true }}>
+        <Menu
+          items={[
+            { key: '1', label: 'Option 1' },
+            { key: '2', label: 'Option 1' },
+            { key: '3', label: 'Option 1' },
+            { key: '4', label: 'Option 1' },
+            { key: '5', label: 'Option 1' },
+            { key: '6', label: 'Option 1' },
+            { key: '7', label: 'Option 1' },
+            { key: '8', label: 'Option 1' },
+          ]}
+          mode="horizontal"
+          overflowedIndicatorPopupClassName="custom-popover"
+          getPopupContainer={(node) => node.parentElement!}
+        />
+      </TriggerMockContext.Provider>,
+    );
+    expect(container.querySelector('.ant-menu.ant-menu-light.custom-popover')).toBeTruthy();
+  });
 });

components/menu/menu.tsx

@@ -1,22 +1,22 @@
+import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
+import classNames from 'classnames';
 import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
 import RcMenu from 'rc-menu';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import omit from 'rc-util/lib/omit';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import classNames from 'classnames';
-import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
-import warning from '../_util/warning';
 import initCollapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
-import type { SiderContextProps } from '../layout/Sider';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-import useStyle from './style';
+import type { SiderContextProps } from '../layout/Sider';
+import type { MenuContextProps, MenuTheme } from './MenuContext';
+import MenuContext from './MenuContext';
 import OverrideContext from './OverrideContext';
-import useItems from './hooks/useItems';
 import type { ItemType } from './hooks/useItems';
-import MenuContext from './MenuContext';
-import type { MenuTheme, MenuContextProps } from './MenuContext';
+import useItems from './hooks/useItems';
+import useStyle from './style';
 
 export interface MenuProps extends Omit<RcMenuProps, 'items'> {
   theme?: MenuTheme;
@@ -59,6 +59,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
     mode,
     selectable,
     onClick,
+    overflowedIndicatorPopupClassName,
     ...restProps
   } = props;
 
@@ -152,7 +153,11 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
         <RcMenu
           getPopupContainer={getPopupContainer}
           overflowedIndicator={<EllipsisOutlined />}
-          overflowedIndicatorPopupClassName={classNames(prefixCls, `${prefixCls}-${theme}`)}
+          overflowedIndicatorPopupClassName={classNames(
+            prefixCls,
+            `${prefixCls}-${theme}`,
+            overflowedIndicatorPopupClassName,
+          )}
           mode={mergedMode}
           selectable={mergedSelectable}
           onClick={onItemClick}