Properly update anchored regions in dialogs and other top-layer elements

change/@ni-fast-foundation-7b80b38c-f554-4f52-87cd-81b3a9c205cc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Properly update anchored regions in dialogs",
+  "packageName": "@ni/fast-foundation",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/package.json

@@ -94,6 +94,7 @@
     "@ni/fast-element": "^10.1.2",
     "@ni/fast-web-utilities": "^10.0.4",
     "tabbable": "^6.2.0",
+    "top-layer-observer": "^0.1.0",
     "tslib": "^2.8.1"
   },
   "customElements": "dist/custom-elements.json"

packages/web-components/fast-foundation/rollup.config.js

@@ -12,10 +12,12 @@ export default [
             {
                 file: "dist/fast-foundation.js",
                 format: "esm",
+                inlineDynamicImports: true,
             },
             {
                 file: "dist/fast-foundation.min.js",
                 format: "esm",
+                inlineDynamicImports: true,
                 plugins: [terser()],
             },
         ],

packages/web-components/fast-foundation/src/anchored-region/anchored-region.spec.ts

@@ -1,15 +1,18 @@
-import { expect } from "chai";
+import chai, { expect } from "chai";
+import spies from "chai-spies";
 import { AnchoredRegion, anchoredRegionTemplate as template } from "./index";
 import { fixture } from "../test-utilities/fixture";
 import { DOM } from "@ni/fast-element";
 
+chai.use(spies);
+
 const FASTAnchoredRegion = AnchoredRegion.compose({
     baseName: "anchored-region",
     template
 })
 
-async function setup() {
-    const { element, connect, disconnect, parent } = await fixture(FASTAnchoredRegion());
+async function setup(parentElement?: HTMLElement) {
+    const { element, connect, disconnect, parent } = await fixture(FASTAnchoredRegion(), { parent: parentElement });
 
     const button = document.createElement("button");
     const content = document.createElement("div");
@@ -27,6 +30,7 @@ async function setup() {
     element.appendChild(content);
     element.setAttribute("viewport", "viewport");
     element.setAttribute("anchor", "anchor");
+    element.setAttribute("auto-update-mode", "auto");
     element.id = "region";
 
     return { element, connect, disconnect, content };
@@ -67,4 +71,156 @@ describe("Anchored Region", () => {
 
         await disconnect();
     });
+
+    describe("scroll event listener", () => {
+        let parentAddListenerSpy: any;
+        let parentRemoveListenerSpy: any;
+        let windowAddListenerSpy: any;
+        let windowRemoveListenerSpy: any;
+
+        function setupSpies(parent: HTMLElement) {
+            parentAddListenerSpy = chai.spy.on(parent, "addEventListener");
+            parentRemoveListenerSpy = chai.spy.on(parent, "removeEventListener");
+            windowAddListenerSpy = chai.spy.on(window, "addEventListener");
+            windowRemoveListenerSpy = chai.spy.on(window, "removeEventListener");
+        }
+
+        function assertListenedOnTopLayerElement() {
+            expect(windowRemoveListenerSpy).not.to.have.been.called.with("scroll");
+            expect(windowAddListenerSpy).not.to.have.been.called.with("scroll");
+            expect(parentAddListenerSpy).to.have.been.called.with("scroll");
+            expect(parentRemoveListenerSpy).to.have.been.called.with("scroll");
+        }
+
+        function assertListenedOnWindow() {
+            expect(parentRemoveListenerSpy).not.to.have.been.called.with("scroll");
+            expect(parentAddListenerSpy).not.to.have.been.called.with("scroll");
+            expect(windowAddListenerSpy).to.have.been.called.with("scroll");
+            expect(windowRemoveListenerSpy).to.have.been.called.with("scroll");
+        }
+
+        function assertChangedToListeningOnWindow() {
+            expect(windowRemoveListenerSpy).not.to.have.been.called.with("scroll");
+            expect(parentAddListenerSpy).not.to.have.been.called.with("scroll");
+            expect(parentRemoveListenerSpy).to.have.been.called.with("scroll");
+            expect(windowAddListenerSpy).to.have.been.called.with("scroll");
+        }
+
+        function assertChangedToListeningOnTopLayerElement() {
+            expect(parentRemoveListenerSpy).not.to.have.been.called.with("scroll");
+            expect(windowAddListenerSpy).not.to.have.been.called.with("scroll");
+            expect(windowRemoveListenerSpy).to.have.been.called.with("scroll");
+            expect(parentAddListenerSpy).to.have.been.called.with("scroll");
+        }
+
+        async function setupScrollListenerTest(parent: HTMLElement) {
+            const { element, connect, disconnect } = await setup(parent);
+
+            // We will re-attach the anchored region after displaying the parent.
+            element.remove();
+            setupSpies(parent);
+            await connect();
+
+            return { region: element, disconnect };
+        }
+
+        afterEach(() => chai.spy.restore());
+
+        it("should be on containing modal dialog instead of window", async () => {
+            const dialog = document.createElement("dialog");
+            const { region, disconnect } = await setupScrollListenerTest(dialog);
+            dialog.showModal();
+
+            dialog.appendChild(region); // adds scroll listener
+            region.remove(); // removes scroll listener
+
+            dialog.close();
+            await disconnect();
+
+            assertListenedOnTopLayerElement();
+        });
+
+        it("should be on window when in non-modal dialog", async () => {
+            const dialog = document.createElement("dialog");
+            const { region, disconnect } = await setupScrollListenerTest(dialog);
+            dialog.show();
+
+            dialog.appendChild(region); // adds scroll listener
+            region.remove(); // removes scroll listener
+
+            dialog.close();
+            await disconnect();
+
+            assertListenedOnWindow();
+        });
+
+        it("should be on containing popover element instead of window", async () => {
+            const popoverDiv = document.createElement("div");
+            popoverDiv.setAttribute("popover", "");
+            const { region, disconnect } = await setupScrollListenerTest(popoverDiv);
+            popoverDiv.showPopover();
+
+            popoverDiv.appendChild(region); // adds scroll listener
+            region.remove(); // removes scroll listener
+
+            popoverDiv.hidePopover();
+            await disconnect();
+
+            assertListenedOnTopLayerElement();
+        });
+
+        it("should be on containing fullscreen element instead of window", async () => {
+            const fullscreenDiv = document.createElement("div");
+            const { region, disconnect } = await setupScrollListenerTest(fullscreenDiv);
+            Object.defineProperty(document, "fullscreenElement", {
+                get: () => fullscreenDiv,
+                configurable: true,
+            });
+
+            fullscreenDiv.appendChild(region); // adds scroll listener
+            region.remove(); // removes scroll listener
+
+            Object.defineProperty(document, "fullscreenElement", {
+                get: () => null,
+                configurable: true,
+            });
+            await disconnect();
+
+            assertListenedOnTopLayerElement();
+        });
+
+        it("should switch to containing dialog when it is shown as modal", async () => {
+            const dialog = document.createElement("dialog");
+            const { connect, disconnect } = await setup(dialog);
+            await connect();
+            setupSpies(dialog);
+
+            // Move into top layer
+            dialog.showModal();
+            await DOM.nextUpdate();
+
+            assertChangedToListeningOnTopLayerElement();
+
+            dialog.close();
+            await disconnect();
+        });
+
+        it("should switch to window when containing dialog stops being modal", async () => {
+            const dialog = document.createElement("dialog");
+            const { element, connect, disconnect } = await setup(dialog);
+            element.remove();
+            await connect();
+            dialog.showModal();
+            dialog.appendChild(element);
+            setupSpies(dialog);
+
+            // Move out of top layer
+            dialog.close();
+            await DOM.nextUpdate();
+
+            assertChangedToListeningOnWindow();
+
+            await disconnect();
+        });
+    });
 });

packages/web-components/fast-foundation/src/anchored-region/anchored-region.ts

@@ -1,13 +1,21 @@
 import { attr, DOM, observable } from "@ni/fast-element";
 import { Direction, eventResize, eventScroll } from "@ni/fast-web-utilities";
+import type { TopLayerCallback, TopLayerObserver } from "top-layer-observer";
 import { FoundationElement } from "../foundation-element/foundation-element.js";
+import { topLayerRootAncestor } from "../utilities/composed-parent.js";
 import { getDirection } from "../utilities/direction.js";
 import { IntersectionService } from "../utilities/intersection-service.js";
 import type {
     ResizeObserverClassDefinition,
     ResizeObserverEntry,
 } from "../utilities/resize-observer.js";
 
+// The "top layer" does not exist in Node.js, and the top-layer-observer module crashes when loaded in Node.js.
+let topLayerObserverConstructor: (new (callback: TopLayerCallback) => TopLayerObserver) | undefined;
+if (typeof document !== "undefined") {
+    void import("top-layer-observer").then(m => topLayerObserverConstructor = m.TopLayerObserver);
+}
+
 /**
  * Defines the base behavior of an anchored region on a particular axis
  *
@@ -404,13 +412,17 @@ export class AnchoredRegion extends FoundationElement {
     // justify a layout update that affects the dom (prevents repeated sub-pixel corrections)
     private updateThreshold: number = 0.5;
 
+    private scrollListenerTarget: EventTarget = window;
+    private topLayerObserver: TopLayerObserver | null = null;
+
     private static intersectionService: IntersectionService = new IntersectionService();
 
     /**
      * @internal
      */
     connectedCallback() {
         super.connectedCallback();
+        this.scrollListenerTarget = topLayerRootAncestor(this) ?? window;
         if (this.autoUpdateMode === "auto") {
             this.startAutoUpdateEventListeners();
         }
@@ -1315,10 +1327,11 @@ export class AnchoredRegion extends FoundationElement {
      */
     private startAutoUpdateEventListeners = (): void => {
         window.addEventListener(eventResize, this.update, { passive: true });
-        window.addEventListener(eventScroll, this.update, {
-            passive: true,
-            capture: true,
-        });
+        this.addScrollListener();
+        if (topLayerObserverConstructor !== undefined) {
+            this.topLayerObserver ??= new topLayerObserverConstructor(this.handleTopLayerChange);
+            this.topLayerObserver.observe();
+        }
         if (this.resizeDetector !== null && this.viewportElement !== null) {
             this.resizeDetector.observe(this.viewportElement);
         }
@@ -1328,10 +1341,33 @@ export class AnchoredRegion extends FoundationElement {
      * stops event listeners that can trigger auto updating
      */
     private stopAutoUpdateEventListeners = (): void => {
+        this.topLayerObserver?.disconnect();
         window.removeEventListener(eventResize, this.update);
-        window.removeEventListener(eventScroll, this.update);
+        this.removeScrollListener();
         if (this.resizeDetector !== null && this.viewportElement !== null) {
             this.resizeDetector.unobserve(this.viewportElement);
         }
     };
+
+    private handleTopLayerChange = (): void => {
+        const newValue = topLayerRootAncestor(this) ?? window;
+        if (newValue !== this.scrollListenerTarget) {
+            this.removeScrollListener();
+            this.scrollListenerTarget = newValue;
+            this.addScrollListener();
+        }
+    };
+
+    private addScrollListener = (): void => {
+        this.scrollListenerTarget.addEventListener(eventScroll, this.update, {
+            passive: true,
+            capture: true,
+        });
+    };
+
+    private removeScrollListener = (): void => {
+        this.scrollListenerTarget.removeEventListener(eventScroll, this.update, {
+            capture: true,
+        });
+    };
 }

packages/web-components/fast-foundation/src/utilities/composed-parent.ts

@@ -4,22 +4,43 @@
  * element of the shadow root. Otherwise it will return the parent node or null if
  * no parent node exists.
  * @param element - The element for which to retrieve the composed parent
+ * @param asSlotted - When true, returns the element's assignedSlot (if any) as the composed parent.
  *
  * @public
  */
-export function composedParent<T extends HTMLElement>(element: T): HTMLElement | null {
-    const parentNode = element.parentElement;
+export function composedParent<T extends HTMLElement>(element: T, asSlotted = false): HTMLElement | null {
+    if (asSlotted && element.assignedSlot) {
+        return element.assignedSlot;
+    }
 
-    if (parentNode) {
-        return parentNode;
-    } else {
-        const rootNode = element.getRootNode();
+    return element.parentElement ?? shadowDomHost(element);
+}
 
-        if ((rootNode as ShadowRoot).host instanceof HTMLElement) {
-            // this is shadow-root
-            return (rootNode as ShadowRoot).host as HTMLElement;
-        }
+function shadowDomHost(element: HTMLElement): HTMLElement | null {
+    const rootNode = element.getRootNode();
+
+    if ((rootNode as ShadowRoot).host instanceof HTMLElement) {
+        // this is shadow-root
+        return (rootNode as ShadowRoot).host as HTMLElement;
     }
 
     return null;
 }
+
+/** @internal */
+export function topLayerRootAncestor(element: HTMLElement): HTMLElement | null {
+    let parentElement: HTMLElement | null = composedParent(element, true);
+    while (parentElement) {
+        if (isTopLayerRoot(parentElement)) {
+            return parentElement;
+        }
+        parentElement = composedParent(parentElement, true);
+    }
+    return null;
+}
+
+function isTopLayerRoot(element: HTMLElement): boolean {
+    return element.matches(':popover-open')
+        || element.matches(':modal')
+        || document.fullscreenElement === element;
+}