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( + } + popupAlign={{ + points: ['bc', 'tc'], + _experimental: { + dynamicInset: true, + }, + }} + > +
+ , + ); + + await awaitFakeTimer(); + + expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({ + bottom: `100px`, + }); + }); + +});