diff --git a/apps/prs/angular/src/app/app.component.html b/apps/prs/angular/src/app/app.component.html index dff506719..dfd0e46b0 100644 --- a/apps/prs/angular/src/app/app.component.html +++ b/apps/prs/angular/src/app/app.component.html @@ -1,13 +1,37 @@
-
+
Home - 2878 - Regional Insights - Occupational Insights + bug2720 + Dropdown expanding + ...inside Container + + Interactive super long menu item to test overflow handling lorem ipsum dolor sit + amet + + + Noninteractive super long menu item to test overflow handling lorem ipsum dolor + sit amet + + + Bug 3450 + Bug 3450 + + Super long menu item to test overflow handling lorem ipsum dolor sit amet + + + + Manage account + Request new staff account for a long + System admin + Sign out + Super long menu item to test overflow handling lorem ipsum dolor sit amet + +
@@ -57,6 +81,7 @@ 3337 - Autocomplete styling 3279 3384 Table v2 sample + Bug 3450 1328 diff --git a/apps/prs/angular/src/app/app.routes.ts b/apps/prs/angular/src/app/app.routes.ts index 7c300d9ee..da99ef895 100644 --- a/apps/prs/angular/src/app/app.routes.ts +++ b/apps/prs/angular/src/app/app.routes.ts @@ -43,6 +43,7 @@ import { Bug3281Component } from "../routes/bugs/3281/bug3281.component"; import { Bug3337Component } from "../routes/bugs/3337/bug3337.component"; import { Bug3279Component } from "../routes/bugs/3279/bug3279.component"; import { Bug3384Component } from "../routes/bugs/3384/bug3384.component"; +import { Bug3450Component } from "../routes/bugs/3450/bug3450.component"; import { Feat1328Component } from "../routes/features/feat1328/feat1328.component"; import { Feat1383Component } from "../routes/features/feat1383/feat1383.component"; @@ -118,6 +119,8 @@ export const appRoutes: Route[] = [ { path: "bugs/3337", component: Bug3337Component }, { path: "bugs/3279", component: Bug3279Component }, { path: "bugs/3384", component: Bug3384Component }, + { path: "bugs/3450", component: Bug3450Component }, + // Feature routes { path: "features/1328", component: Feat1328Component }, { path: "features/1383", component: Feat1383Component }, diff --git a/apps/prs/angular/src/routes/bugs/3450/bug3450.component.html b/apps/prs/angular/src/routes/bugs/3450/bug3450.component.html new file mode 100644 index 000000000..df5a06d26 --- /dev/null +++ b/apps/prs/angular/src/routes/bugs/3450/bug3450.component.html @@ -0,0 +1,40 @@ +
+

Bug 3450 - Dropdown expanding inside Container

+ + + +

The GoabDropdown below should expand outside of the container.

+ + + + + + + + + + +

The GoabDatePicker below should expand outside of the container.

+ + + + + + + +

Testing Directions

+

This is a test of GoabPopover not GoabDropdown or GoabDatePicker.

+
    +
  • + Open the GoabDropdown and GoabDatePicker and verify that they expand outside of the + container. +
    • +
  • + Verify that the GoabDropdown and GoabDatePicker are not cut off by the container. +
    • +
  • + Shrink and expand the window to cause the GoabDropdown and GoabDatePicker to expand + upwards instead. +
    • +
+
diff --git a/apps/prs/angular/src/routes/bugs/3450/bug3450.component.ts b/apps/prs/angular/src/routes/bugs/3450/bug3450.component.ts new file mode 100644 index 000000000..5cf19899f --- /dev/null +++ b/apps/prs/angular/src/routes/bugs/3450/bug3450.component.ts @@ -0,0 +1,26 @@ +import { Component } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { + GoabBlock, + GoabContainer, + GoabDatePicker, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, +} from "@abgov/angular-components"; + +@Component({ + standalone: true, + selector: "abgov-bug3450", + templateUrl: "./bug3450.component.html", + imports: [ + CommonModule, + GoabBlock, + GoabContainer, + GoabDatePicker, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + ], +}) +export class Bug3450Component {} diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx index 9ea799e24..d34b16ce5 100644 --- a/apps/prs/react/src/app/app.tsx +++ b/apps/prs/react/src/app/app.tsx @@ -2,6 +2,7 @@ import { Link, Outlet } from "react-router-dom"; import { GoabAppFooter, GoabAppHeader, + GoabAppHeaderMenu, GoabMicrositeHeader, GoabOneColumnLayout, GoabSideMenu, @@ -12,9 +13,37 @@ import "@abgov/style"; export function App() { return ( -
+
- + + Home + + bug2720 + Dropdown expanding + ...inside Container + + Super long menu item to test overflow handling lorem ipsum dolor sit amet + + + + Bug 3450 + Bug 3450 + + Super long menu item to test overflow handling lorem ipsum dolor sit amet + + + + Manage account + Request new staff account + System admin + + Sign out + + + Super long menu item to test overflow handling lorem ipsum dolor sit amet + + +
3337 Input autocomplete styling 3279 Work Side Menu Key Nav 3384 v2 Table Border + 3450 Dropdown expanding inside Container 1383 Button Filled Icons diff --git a/apps/prs/react/src/main.tsx b/apps/prs/react/src/main.tsx index 4cf795a65..5423115e8 100644 --- a/apps/prs/react/src/main.tsx +++ b/apps/prs/react/src/main.tsx @@ -45,6 +45,7 @@ import { Bug3322Route } from "./routes/bugs/bug3322"; import { Bug3281Route } from "./routes/bugs/bug3281"; import { Bug3337Route } from "./routes/bugs/bug3337"; import { Bug3384Route } from "./routes/bugs/bug3384"; +import { Bug3450Route } from "./routes/bugs/bug3450"; import { EverythingRoute } from "./routes/everything"; import { EverythingBRoute } from "./routes/everything-b"; @@ -129,6 +130,7 @@ root.render( } /> } /> } /> + } /> } /> } /> diff --git a/apps/prs/react/src/routes/bugs/bug3450.tsx b/apps/prs/react/src/routes/bugs/bug3450.tsx new file mode 100644 index 000000000..3421c51a7 --- /dev/null +++ b/apps/prs/react/src/routes/bugs/bug3450.tsx @@ -0,0 +1,54 @@ +import { + GoabBlock, + GoabContainer, + GoabDatePicker, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, +} from "@abgov/react-components"; + +export function Bug3450Route() { + return ( +
+

Bug 3450 - Dropdown expanding inside Container

+ + + +

The GoabDropdown below should expand outside of the container.

+ + + + + + + + + + +

The GoabDatePicker below should expand outside of the container.

+ + + + + + + +

Testing Directions

+

This is a test of GoabPopover not GoabDropdown or GoabDatePicker.

+
    +
  • + Open the GoabDropdown and GoabDatePicker and verify that they expand outside of + the container. +
    • +
  • + Verify that the GoabDropdown and GoabDatePicker are not cut off by the + container. +
    • +
  • + Shrink and expand the window to cause the GoabDropdown and GoabDatePicker to + expand upwards instead. +
    • +
+
+ ); +} diff --git a/libs/react-components/specs/popover.browser.spec.tsx b/libs/react-components/specs/popover.browser.spec.tsx index 5f83402c8..5b16c1d89 100644 --- a/libs/react-components/specs/popover.browser.spec.tsx +++ b/libs/react-components/specs/popover.browser.spec.tsx @@ -100,7 +100,7 @@ describe("Popover", () => { await vi.waitFor(() => { const popoverContentEl = result.getByTestId("popover-content"); expect(popoverContentEl.element()).toBeTruthy(); - expect(popoverContentEl.element().style.bottom).toBe("auto"); + expect(popoverContentEl.element().style.bottom).toBe(""); }); }); @@ -150,7 +150,7 @@ describe("Popover", () => { const popoverContentEl = result.getByTestId("popover-content"); expect(popoverContentEl.element()).toBeTruthy(); // It should be a number ending with px when opening upwards - expect(popoverContentEl.element().style.bottom).toMatch(/-?\d+px/); + expect(popoverContentEl.element().style.top).toMatch(/-?\d+px/); }); }); @@ -199,7 +199,7 @@ describe("Popover", () => { const popoverContentEl = result.getByTestId("popover-content"); expect(popoverContentEl.element()).toBeTruthy(); // bottom should be set to 'auto' when opening downwards - expect(popoverContentEl.element().style.bottom).toBe("auto"); + expect(popoverContentEl.element().style.bottom).toBe(""); }); }); }); diff --git a/libs/web-components/src/components/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte index 14d6586db..bbad013a7 100644 --- a/libs/web-components/src/components/popover/Popover.svelte +++ b/libs/web-components/src/components/popover/Popover.svelte @@ -409,6 +409,8 @@ : null; const popoverRect = getBoundingClientRectWithMargins(_popoverEl); + const offsetParent = _popoverEl.offsetParent as HTMLElement | null; + const offsetParentTop = offsetParent?.getBoundingClientRect().top || 0; // exit if the popover hasn't yet been filled if (popoverRect.height < 20) return; @@ -432,9 +434,12 @@ : position === "above"; if (displayOnTop) { - _popoverEl.style.bottom = `${targetRect.height}px`; + const topPos = targetRect.top - popoverRect.height - offsetParentTop; + _popoverEl.style.top = `${topPos}px`; } else { - _popoverEl.style.bottom = "auto"; // In case this is triggered by _sectionHeight is changed + // Clear top/bottom to keep default below-target static positioning. + _popoverEl.style.top = ""; + _popoverEl.style.bottom = ""; } // Move the popover to the left if it is too far to the right and only if there is space to the left @@ -480,12 +485,7 @@ -
+