diff --git a/common/changes/@itwin/core-react/fix-widgets-popup_2024-11-04-17-06.json b/common/changes/@itwin/core-react/fix-widgets-popup_2024-11-04-17-06.json new file mode 100644 index 00000000000..80c06088d73 --- /dev/null +++ b/common/changes/@itwin/core-react/fix-widgets-popup_2024-11-04-17-06.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/core-react", + "comment": "Fix Popup to adjust final position based on container size instead of window size.", + "type": "none" + } + ], + "packageName": "@itwin/core-react" +} \ No newline at end of file diff --git a/ui/core-react/src/core-react/popup/Popup.tsx b/ui/core-react/src/core-react/popup/Popup.tsx index 377d7e9e830..4331ce4cf95 100644 --- a/ui/core-react/src/core-react/popup/Popup.tsx +++ b/ui/core-react/src/core-react/popup/Popup.tsx @@ -579,16 +579,16 @@ export class Popup extends React.Component { return fittedPoint; } - // const popupRect = this._popup.getBoundingClientRect(); const { popupWidth, popupHeight } = this._getPopupDimensions(); - const { innerWidth, innerHeight } = window; + const container = this.getContainer(); + const containerBounds = container.getBoundingClientRect(); - if (fittedPoint.y + popupHeight > innerHeight) { - fittedPoint.y = innerHeight - popupHeight; + if (fittedPoint.y + popupHeight > containerBounds.height) { + fittedPoint.y = containerBounds.height - popupHeight; } - if (fittedPoint.x + popupWidth > innerWidth) { - fittedPoint.x = innerWidth - popupWidth; + if (fittedPoint.x + popupWidth > containerBounds.width) { + fittedPoint.x = containerBounds.width - popupWidth; } if (fittedPoint.y < 0) { diff --git a/ui/core-react/src/test/popup/Popup.test.tsx b/ui/core-react/src/test/popup/Popup.test.tsx index 09630d3f288..8b76896ebd6 100644 --- a/ui/core-react/src/test/popup/Popup.test.tsx +++ b/ui/core-react/src/test/popup/Popup.test.tsx @@ -494,6 +494,9 @@ describe("", () => { vi.spyOn(targetElement, "getBoundingClientRect").mockReturnValue( DOMRect.fromRect({ x: 100, y: 100, height: 50, width: 50 }) ); + vi.spyOn(document.body, "getBoundingClientRect").mockReturnValue( + DOMRect.fromRect({ x: 0, y: 0, width: 1000, height: 1000 }) + ); }); afterEach(() => {