fix: DOMRect value issues (#481)

Author: consistent-k

src/hooks/useAlign.ts

@@ -212,6 +212,8 @@ export default function useAlign(
         };
       } else {
         const rect = target.getBoundingClientRect();
+        rect.x = rect.x ?? rect.left;
+        rect.y = rect.y ?? rect.top
         targetRect = {
           x: rect.x,
           y: rect.y,
@@ -220,6 +222,8 @@ export default function useAlign(
         };
       }
       const popupRect = popupElement.getBoundingClientRect();
+      popupRect.x = popupRect.x ?? popupRect.left;
+      popupRect.y = popupRect.y ?? popupRect.top;
       const {
         clientWidth,
         clientHeight,

tests/align.test.tsx

@@ -26,6 +26,8 @@ describe('Trigger.Align', () => {
       getBoundingClientRect: () => ({
         x: rectX,
         y: rectY,
+        left: rectX,
+        top: rectY,
         width: rectWidth,
         height: rectHeight,
         right: 200,

tests/arrow.test.jsx

@@ -53,6 +53,8 @@ describe('Trigger.Arrow', () => {
         () => ({
           x: 200,
           y: 200,
+          left: 200,
+          top: 200,
           width: 100,
           height: 50,
         }),

tests/flip-visibleFirst.test.tsx

@@ -56,20 +56,26 @@ describe('Trigger.VisibleFirst', () => {
   let containerRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
 
   let targetRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 1,
     height: 1,
   };
 
   let popupRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
@@ -84,18 +90,24 @@ describe('Trigger.VisibleFirst', () => {
     containerRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };
     targetRect = {
       x: 250,
       y: 250,
+      left: 250,
+      top: 250,
       width: 1,
       height: 1,
     };
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };

tests/flip.test.tsx

@@ -58,13 +58,17 @@ describe('Trigger.Align', () => {
   let spanRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 1,
     height: 1,
   };
 
   let popupRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
@@ -112,12 +116,16 @@ describe('Trigger.Align', () => {
     spanRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 1,
       height: 1,
     };
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };
@@ -253,6 +261,8 @@ describe('Trigger.Align', () => {
     popupRect = {
       x: 100,
       y: 1,
+      left: 100,
+      top: 1,
       width: 100,
       height: 100,
     };
@@ -339,6 +349,8 @@ describe('Trigger.Align', () => {
       ({
         x: 100,
         y: 100,
+        left: 100,
+        top: 100,
         width: 300,
         height: 300,
       } as any);
@@ -384,6 +396,8 @@ describe('Trigger.Align', () => {
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 200,
       height: 200,
     };

tests/flipShift.test.tsx

@@ -79,12 +79,14 @@ const builtinPlacements = {
 };
 
 describe('Trigger.Flip+Shift', () => {
-  let spanRect = { x: 0, y: 0, width: 0, height: 0 };
+  let spanRect = { x: 0, y: 0, left: 0, top: 0, width: 0, height: 0 };
 
   beforeEach(() => {
     spanRect = {
       x: 0,
       y: 100,
+      left: 0,
+      top: 100,
       width: 100,
       height: 100,
     };
@@ -113,6 +115,8 @@ describe('Trigger.Flip+Shift', () => {
         return {
           x: 0,
           y: 0,
+          left: 0,
+          top: 0,
           width: 100,
           height: 300,
         };

tests/rect.test.tsx

@@ -0,0 +1,78 @@
+import { cleanup, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import Trigger from '../src';
+import { awaitFakeTimer } from './util';
+
+describe('Trigger.Rect', () => {
+  let targetVisible = true;
+
+  let rectX = 100;
+  let rectY = 100;
+  let rectWidth = 100;
+  let rectHeight = 100;
+
+  beforeAll(() => {
+    spyElementPrototypes(HTMLDivElement, {
+      getBoundingClientRect: () => ({
+        left: rectX,
+        top: rectY,
+        width: rectWidth,
+        height: rectHeight,
+        right: 200,
+        bottom: 200,
+      }),
+    });
+
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => (targetVisible ? document.body : null),
+      },
+    });
+    spyElementPrototypes(SVGElement, {
+      offsetParent: {
+        get: () => (targetVisible ? document.body : null),
+      },
+    });
+  });
+
+  beforeEach(() => {
+    targetVisible = true;
+
+    rectX = 100;
+    rectY = 100;
+    rectWidth = 100;
+    rectHeight = 100;
+
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.useRealTimers();
+  });
+
+  it('getBoundingClientRect top and left', async () => {
+    render(
+      <Trigger
+        popupVisible
+        popup={<span className="bamboo" />}
+        popupAlign={{
+          points: ['bc', 'tc'],
+          _experimental: {
+            dynamicInset: true,
+          },
+        }}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      bottom: `100px`,
+    });
+  });
+
+});