fix: Not trigger enter open for portal element (#442)

* fix: lazy for portal event

* test: add test case

* chore: clean up

Author: zombieJ

package.json

@@ -45,6 +45,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
+    "@types/node": "^20.11.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",

src/index.tsx

@@ -557,7 +557,7 @@ export function generateTrigger(
     const hoverToShow = showActions.has('hover');
     const hoverToHide = hideActions.has('hover');
 
-    let onPopupMouseEnter: VoidFunction;
+    let onPopupMouseEnter: React.MouseEventHandler<HTMLDivElement>;
     let onPopupMouseLeave: VoidFunction;
 
     if (hoverToShow) {
@@ -578,9 +578,12 @@ export function generateTrigger(
           setMousePosByEvent(event);
         },
       );
-      onPopupMouseEnter = () => {
+      onPopupMouseEnter = (event) => {
         // Only trigger re-open when popup is visible
-        if (mergedOpen || inMotion) {
+        if (
+          (mergedOpen || inMotion) &&
+          popupEle?.contains(event.target as HTMLElement)
+        ) {
           triggerOpen(true, mouseEnterDelay);
         }
       };

tests/portal.test.jsx

@@ -0,0 +1,73 @@
+/* eslint-disable max-classes-per-file */
+
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Trigger from '../src';
+import { placementAlignMap } from './util';
+
+describe('Trigger.Portal', () => {
+  beforeAll(() => {
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => document.body,
+      },
+    });
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.useRealTimers();
+  });
+
+  it('no trigger with portal element', () => {
+    const PortalBox = () => {
+      return ReactDOM.createPortal(
+        <div className="portal-box" />,
+        document.body,
+      );
+    };
+
+    const onPopupVisibleChange = jest.fn();
+
+    const { container } = render(
+      <div className="holder">
+        <Trigger
+          action={['hover']}
+          popupAlign={placementAlignMap.left}
+          onPopupVisibleChange={onPopupVisibleChange}
+          popup={
+            <strong className="x-content">
+              tooltip2
+              <PortalBox />
+            </strong>
+          }
+        >
+          <div className="target">hover</div>
+        </Trigger>
+      </div>,
+    );
+
+    // Show the popup
+    fireEvent.mouseEnter(container.querySelector('.target'));
+    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
+    fireEvent.mouseLeave(container.querySelector('.target'));
+
+    // Mouse enter popup
+    fireEvent.mouseEnter(document.querySelector('.x-content'));
+    fireEvent.mouseLeave(document.querySelector('.x-content'));
+
+    // To Portal
+    fireEvent.mouseEnter(document.querySelector('.portal-box'));
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
+  });
+});