Merge pull request #15705 from zy410419243/issue-15625

fix: MenuItem should not render Tooltip when inlineCollapsed is false

components/menu/MenuItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Item } from 'rc-menu';
 import Tooltip from '../tooltip';
-import { ClickParam } from './index';
+import { ClickParam } from '.';
 
 export interface MenuItemProps {
   rootPrefixCls?: string;
@@ -16,33 +16,29 @@ export interface MenuItemProps {
   onMouseLeave?: (e: { key: string; domEvent: MouseEvent }) => void;
 }
 
-class MenuItem extends React.Component<MenuItemProps> {
-  static isMenuItem = 1;
+export default class MenuItem extends React.Component<MenuItemProps> {
+  static isMenuItem = true;
   private menuItem: this;
 
   onKeyDown = (e: React.MouseEvent<HTMLElement>) => {
     this.menuItem.onKeyDown(e);
   };
+
   saveMenuItem = (menuItem: this) => {
     this.menuItem = menuItem;
   };
-  render() {
-    const { level, children, rootPrefixCls } = this.props;
-    const { title, ...rest } = this.props;
 
-    let titleNode;
-    titleNode = title || (level === 1 ? children : '');
+  render() {
+    const { rootPrefixCls, title, ...rest } = this.props;
 
     return (
       <Tooltip
-        title={titleNode}
+        title={title}
         placement="right"
         overlayClassName={`${rootPrefixCls}-inline-collapsed-tooltip`}
       >
-        <Item {...rest} title={title} ref={this.saveMenuItem} />
+        <Item {...rest} rootPrefixCls={rootPrefixCls} title={title} ref={this.saveMenuItem} />
       </Tooltip>
     );
   }
 }
-
-export default MenuItem;

components/menu/__tests__/index.test.js

@@ -588,4 +588,31 @@ describe('Menu', () => {
     wrapper.update();
     expect(wrapper.instance().contextSiderCollapsed).toBe(false);
   });
+
+  it('MenuItem should not render Tooltip when inlineCollapsed is false', () => {
+    const wrapper = mount(
+      <Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
+        <Menu.Item key="mail">
+          <Icon type="mail" />
+          Navigation One
+        </Menu.Item>
+        <Menu.Item key="app">
+          <Icon type="appstore" />
+          Navigation Two
+        </Menu.Item>
+        <Menu.Item key="alipay">
+          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+            Navigation Four - Link
+          </a>
+        </Menu.Item>
+      </Menu>,
+    );
+    wrapper
+      .find('MenuItem')
+      .first()
+      .simulate('mouseenter');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
+  });
 });