🐛 Fix Alert cannot work with Tooltip (#22594)

close #22579

components/alert/__tests__/index.test.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Alert from '..';
+import Tooltip from '../../tooltip';
+import Popconfirm from '../../popconfirm';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { sleep } from '../../../tests/utils';
 
 const { ErrorBoundary } = Alert;
 
@@ -66,4 +69,46 @@ describe('Alert', () => {
     // eslint-disable-next-line jest/no-standalone-expect
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('could be used with Tooltip', async () => {
+    jest.useRealTimers();
+    const wrapper = mount(
+      <Tooltip title="xxx" mouseEnterDelay={0}>
+        <Alert
+          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+          type="warning"
+        />
+      </Tooltip>,
+    );
+    wrapper.find('.ant-alert').simulate('mouseenter');
+    await sleep(0);
+    expect(
+      wrapper
+        .find(Tooltip)
+        .instance()
+        .getPopupDomNode(),
+    ).toBeTruthy();
+    jest.useFakeTimers();
+  });
+
+  it('could be used with Popconfirm', async () => {
+    jest.useRealTimers();
+    const wrapper = mount(
+      <Popconfirm title="xxx">
+        <Alert
+          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+          type="warning"
+        />
+      </Popconfirm>,
+    );
+    wrapper.find('.ant-alert').simulate('click');
+    await sleep(0);
+    expect(
+      wrapper
+        .find(Popconfirm)
+        .instance()
+        .getPopupDomNode(),
+    ).toBeTruthy();
+    jest.useFakeTimers();
+  });
 });

components/alert/index.tsx

@@ -42,6 +42,9 @@ export interface AlertProps {
   className?: string;
   banner?: boolean;
   icon?: React.ReactNode;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 export interface AlertState {
@@ -103,6 +106,9 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
       className = '',
       style,
       icon,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
     } = this.props;
     let { closable, type, showIcon } = this.props;
     const { closing, closed } = this.state;
@@ -173,7 +179,15 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
         transitionName={`${prefixCls}-slide-up`}
         onEnd={this.animationEnd}
       >
-        <div data-show={!closing} className={alertCls} style={style} {...dataOrAriaProps}>
+        <div
+          data-show={!closing}
+          className={alertCls}
+          style={style}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onClick={onClick}
+          {...dataOrAriaProps}
+        >
           {showIcon ? iconNode : null}
           <span className={`${prefixCls}-message`}>{message}</span>
           <span className={`${prefixCls}-description`}>{description}</span>