chore: When target invisible, not trigger align (#336)

* docs: update demo

* test: update test cas

* test: add test case

* test: fix test case

Author: zombieJ

docs/examples/container.tsx

@@ -61,6 +61,7 @@ export default () => {
   console.log('Demo Render!');
 
   const [scale, setScale] = React.useState('1');
+  const [targetVisible, setTargetVisible] = React.useState(true);
 
   const rootRef = React.useRef<HTMLDivElement>();
   const popHolderRef = React.useRef<HTMLDivElement>();
@@ -78,17 +79,28 @@ export default () => {
         ref={rootRef}
         style={{ background: 'rgba(0, 0, 255, 0.1)', padding: 16 }}
       >
-        <input
-          type="number"
-          value={scale}
-          onChange={(e) => setScale(e.target.value)}
+        <div
           style={{
             position: 'fixed',
             left: 0,
             top: 0,
             zIndex: 9999,
           }}
-        />
+        >
+          <input
+            type="number"
+            value={scale}
+            onChange={(e) => setScale(e.target.value)}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              setTargetVisible((v) => !v);
+            }}
+          >
+            Target Visible: ({String(targetVisible)})
+          </button>
+        </div>
         <div
           id="demo-holder"
           ref={popHolderRef}
@@ -149,13 +161,13 @@ export default () => {
             >
               <span
                 style={{
-                  display: 'inline-block',
                   background: 'green',
                   color: '#FFF',
                   paddingBlock: 30,
                   paddingInline: 70,
                   opacity: 0.9,
                   transform: 'scale(0.6)',
+                  display: targetVisible ? 'inline-block' : 'none',
                 }}
               >
                 Target

src/hooks/useAlign.ts

@@ -226,7 +226,11 @@ export default function useAlign(
       );
 
       // No need to align since it's not visible in view
-      if (scaleX === 0 || scaleY === 0) {
+      if (
+        scaleX === 0 ||
+        scaleY === 0 ||
+        (target instanceof HTMLElement && !target.offsetParent)
+      ) {
         return;
       }
 

tests/align.test.tsx

@@ -1,7 +1,7 @@
 import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
-import type { TriggerProps } from '../src';
+import type { TriggerProps, TriggerRef } from '../src';
 import Trigger from '../src';
 import { awaitFakeTimer } from './util';
 
@@ -14,6 +14,8 @@ export const triggerResize = (target: Element) => {
 };
 
 describe('Trigger.Align', () => {
+  let targetVisible = true;
+
   beforeAll(() => {
     spyElementPrototypes(HTMLDivElement, {
       getBoundingClientRect: () => ({
@@ -23,9 +25,16 @@ describe('Trigger.Align', () => {
         height: 100,
       }),
     });
+
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => (targetVisible ? document.body : null),
+      },
+    });
   });
 
   beforeEach(() => {
+    targetVisible = true;
     jest.useFakeTimers();
   });
 
@@ -130,4 +139,41 @@ describe('Trigger.Align', () => {
       document.querySelector('.rc-trigger-popup-placement-top'),
     ).toBeTruthy();
   });
+
+  it('invisible should not align', async () => {
+    const onPopupAlign = jest.fn();
+    const triggerRef = React.createRef<TriggerRef>();
+
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{}}
+        onPopupAlign={onPopupAlign}
+        ref={triggerRef}
+      >
+        <span />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    expect(onPopupAlign).toHaveBeenCalled();
+    onPopupAlign.mockReset();
+
+    for (let i = 0; i < 10; i += 1) {
+      triggerRef.current!.forceAlign();
+
+      await awaitFakeTimer();
+      expect(onPopupAlign).toHaveBeenCalled();
+      onPopupAlign.mockReset();
+    }
+
+    // Make invisible
+    targetVisible = false;
+
+    triggerRef.current!.forceAlign();
+    await awaitFakeTimer();
+    expect(onPopupAlign).not.toHaveBeenCalled();
+  });
 });

tests/arrow.test.jsx

@@ -8,6 +8,14 @@ import {
 import Trigger from '../src';
 
 describe('Trigger.Arrow', () => {
+  beforeAll(() => {
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => document.body,
+      },
+    });
+  });
+
   beforeEach(() => {
     jest.useFakeTimers();
   });

tests/basic.test.jsx

@@ -8,6 +8,14 @@ import Trigger from '../src';
 import { awaitFakeTimer, placementAlignMap } from './util';
 
 describe('Trigger.Basic', () => {
+  beforeAll(() => {
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => document.body,
+      },
+    });
+  });
+
   beforeEach(() => {
     jest.useFakeTimers();
   });