diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
index 6c15a09..6eacbf2 100644
--- a/src/hooks/useAlign.ts
+++ b/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,
diff --git a/tests/align.test.tsx b/tests/align.test.tsx
index 9366cc7..945b132 100644
--- a/tests/align.test.tsx
+++ b/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,
diff --git a/tests/arrow.test.jsx b/tests/arrow.test.jsx
index 80be36a..24df705 100644
--- a/tests/arrow.test.jsx
+++ b/tests/arrow.test.jsx
@@ -53,6 +53,8 @@ describe('Trigger.Arrow', () => {
() => ({
x: 200,
y: 200,
+ left: 200,
+ top: 200,
width: 100,
height: 50,
}),
diff --git a/tests/flip-visibleFirst.test.tsx b/tests/flip-visibleFirst.test.tsx
index e9ef989..f44c530 100644
--- a/tests/flip-visibleFirst.test.tsx
+++ b/tests/flip-visibleFirst.test.tsx
@@ -56,6 +56,8 @@ describe('Trigger.VisibleFirst', () => {
let containerRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
@@ -63,6 +65,8 @@ describe('Trigger.VisibleFirst', () => {
let targetRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 1,
height: 1,
};
@@ -70,6 +74,8 @@ describe('Trigger.VisibleFirst', () => {
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,
};
diff --git a/tests/flip.test.tsx b/tests/flip.test.tsx
index fa98fae..17fb0dd 100644
--- a/tests/flip.test.tsx
+++ b/tests/flip.test.tsx
@@ -58,6 +58,8 @@ describe('Trigger.Align', () => {
let spanRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 1,
height: 1,
};
@@ -65,6 +67,8 @@ describe('Trigger.Align', () => {
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,
};
diff --git a/tests/flipShift.test.tsx b/tests/flipShift.test.tsx
index ed4b317..d9e02a0 100644
--- a/tests/flipShift.test.tsx
+++ b/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,
};
diff --git a/tests/rect.test.tsx b/tests/rect.test.tsx
new file mode 100644
index 0000000..8f708bf
--- /dev/null
+++ b/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(
+