fix(#3540): add manual positioning to Popover when the browser does not support CSS anchor positioning

Author: willcodeforcoffee

libs/react-components/specs/app-header-menu.browser.spec.tsx

@@ -53,10 +53,13 @@ describe("AppHeaderMenu", () => {
 
     // Close menu with Escape
     await userEvent.keyboard("{Escape}");
-    await vi.waitFor(() => {
-      const popoverContent = result.getByTestId("popover-content");
-      expect(popoverContent.element().checkVisibility()).toBeFalsy();
-    });
+    await vi.waitFor(
+      () => {
+        const popoverContent = result.getByTestId("popover-content");
+        expect(popoverContent.element().checkVisibility()).toBeFalsy();
+      },
+      { timeout: 10000 },
+    );
 
     // 2. Dismiss the notification banner
     const banner = result.getByTestId("test-banner");

libs/react-components/specs/popover.browser.spec.tsx

@@ -55,9 +55,12 @@ describe("Popover", () => {
     // Press Escape to close (native popover light dismiss)
     await userEvent.keyboard("{Escape}");
 
-    await vi.waitFor(() => {
-      expect(closeButton).not.toBeVisible();
-    });
+    await vi.waitFor(
+      () => {
+        expect(closeButton).not.toBeVisible();
+      },
+      { timeout: 10000 },
+    );
   });
 
   it("should return focus to trigger after closing with Escape - issue3067", async () => {
@@ -89,9 +92,12 @@ describe("Popover", () => {
     });
 
     // Focus should be on the popover target button
-    await vi.waitFor(() => {
-      expect(popoverTarget.element().matches(":focus-within")).toBeTruthy();
-    });
+    await vi.waitFor(
+      () => {
+        expect(popoverTarget.element().matches(":focus-within")).toBeTruthy();
+      },
+      { timeout: 10000 },
+    );
   });
 
   it("should close Popover A when Popover B is opened (popover='auto' behavior)", async () => {

libs/web-components/src/components/popover/Popover.svelte

@@ -67,6 +67,10 @@
   // Private
   let _rootEl: HTMLElement;
   let _popoverEl: HTMLElement;
+  const _needsManualPositioning =
+    typeof document !== "undefined" &&
+    !("anchorName" in document.documentElement.style);
+  let _positionRafId: number | null = null;
 
   // Reactive
   let _targetEl: HTMLElement;
@@ -122,13 +126,65 @@
   });
 
   onDestroy(() => {
+    stopManualPositioning();
     window.removeEventListener("resize", updateAutoPosition);
     // true was passed when the listener was added, so it's necesary to be passed here as well
     window.removeEventListener("popstate", handleUrlChange, true);
   });
 
   // Functions
 
+  function updatePopoverPosition() {
+    if (!_isOpen || !_targetEl || !_popoverEl) return;
+
+    const targetRect = _targetEl.getBoundingClientRect();
+    const xOffset = hoffset ? parseFloat(hoffset) : 0;
+    const yOffset = voffset ? parseFloat(voffset) : 3;
+
+    // Recalculate auto position based on current viewport space
+    if (position === "auto") {
+      const popoverRect = _popoverEl.getBoundingClientRect();
+      const spaceAbove = targetRect.top;
+      const spaceBelow = window.innerHeight - targetRect.bottom;
+
+      _autoPosition =
+        spaceBelow < popoverRect.height && spaceAbove > spaceBelow
+          ? "above"
+          : "below";
+    }
+
+    const isAbove =
+      position === "above" ||
+      (position === "auto" && _autoPosition === "above");
+
+    if (isAbove) {
+      _popoverEl.style.top = `${targetRect.top - yOffset}px`;
+      _popoverEl.style.left = `${targetRect.left + xOffset}px`;
+      _popoverEl.style.transform = "translateY(-100%)";
+    } else {
+      _popoverEl.style.top = `${targetRect.bottom + yOffset}px`;
+      _popoverEl.style.left = `${targetRect.left + xOffset}px`;
+      _popoverEl.style.transform = "";
+    }
+  }
+
+  function startManualPositioning() {
+    if (!_needsManualPositioning) return;
+
+    const loop = () => {
+      updatePopoverPosition();
+      _positionRafId = requestAnimationFrame(loop);
+    };
+    _positionRafId = requestAnimationFrame(loop);
+  }
+
+  function stopManualPositioning() {
+    if (_positionRafId !== null) {
+      cancelAnimationFrame(_positionRafId);
+      _positionRafId = null;
+    }
+  }
+
   function isPopoverOpen(): boolean {
     try {
       return _popoverEl.matches(":popover-open");
@@ -188,8 +244,7 @@
     }
   }
 
-  function handleNativeToggle(e: Event) {
-    const toggleEvent = e as Event & { newState?: "open" | "closed" };
+  function handleNativeToggle(toggleEvent: ToggleEvent) {
     if (toggleEvent.newState === "open") {
       _isOpen = true;
     } else if (toggleEvent.newState === "closed") {
@@ -203,17 +258,28 @@
     // Dispatch _open/_close events for consumer components
     // (MenuButton, AppHeader, AppHeaderMenu, Dropdown)
     if (_isOpen) {
-      dispatch(_rootEl, "_open", {}, { bubbles: true });
+      dispatch(_rootEl, "_open");
       requestAnimationFrame(updateAutoPosition); // same vs await tick(), make sure popover element is fully rendered before we measure its dimension
+      startManualPositioning();
     } else {
-      _targetEl.focus();
-      dispatch(_rootEl, "_close", {}, { bubbles: true });
+      stopManualPositioning();
+      _targetEl?.focus();
+      dispatch(_rootEl, "_close");
     }
   }
 
   function closePopover() {
     if (_isOpen) {
       _popoverEl?.hidePopover(); // browser will fire and trigger handleNativeToggle
+      // If the browser doesn't support the API we have to trigger the toggle event manually.
+      if (_needsManualPositioning) {
+        const event = new ToggleEvent("toggle", {
+          bubbles: true,
+          newState: "closed",
+          oldState: "open",
+        });
+        handleNativeToggle(event); // in case the browser doesn't fire toggle event, we need to manually update the state
+      }
     }
   }
 
@@ -227,18 +293,24 @@
       _popoverEl.hidePopover();
       _isOpen = false;
     } else {
+      // If the Popover API is not supported, we need to manually close other
+      // popovers before opening a new one.
+      if (_needsManualPositioning) {
+        document.body.dispatchEvent(
+          new CustomEvent("goa:closePopover", {
+            detail: { target: _targetEl },
+            bubbles: true,
+          }),
+        );
+      }
       _popoverEl.showPopover();
       _isOpen = true;
       requestAnimationFrame(updateAutoPosition);
     }
   }
 
   function updateAutoPosition() {
-    if (!_isOpen || !_targetEl || !_popoverEl) {
-      return;
-    }
-
-    if (position !== "auto") {
+    if (position !== "auto" || !_isOpen || !_targetEl || !_popoverEl) {
       return;
     }
 
@@ -301,7 +373,10 @@
     style={styles(
       style("width", position !== "right" ? width : undefined),
       style("min-width", minwidth),
-      style("max-width", position !== "right" && width ? `max(${width}, ${maxwidth})` : maxwidth),
+      style(
+        "max-width",
+        position !== "right" && width ? `max(${width}, ${maxwidth})` : maxwidth,
+      ),
       style("padding", _padded ? "var(--goa-space-m)" : "0"),
     )}
   >
@@ -355,7 +430,6 @@
     filter: var(--goa-popover-shadow, none);
     border: var(--goa-popover-border, none);
     margin: 0;
-
     position-anchor: --goa-popover-target;
     inset-block-start: anchor(bottom);
     inset-inline-start: anchor(left);