From 9c5ed960612da90b39f49445a00cf973410137a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20Kova=C4=8Devi=C4=87?= <milan.kovacevic@codaxy.com>
Date: Fri, 4 Sep 2026 14:11:42 +0200
Subject: [PATCH 1/5] Fix dropdown positioning when a related element lives
 inside an iframe

---
 litmus/features/dropdown/IFramePortal.js      |   57 +
 .../dropdown/lookup-inside-iframe-portal.js   |   82 +
 .../dropdown/lookup-inside-real-iframe.js     |   62 +
 litmus/features/dropdown/style.scss           |    9 +
 litmus/index.js                               |    4 +-
 packages/cx/src/util/getActiveElement.ts      |   15 +-
 packages/cx/src/widgets/overlay/Dropdown.tsx  | 1779 +++++++++--------
 7 files changed, 1121 insertions(+), 887 deletions(-)
 create mode 100644 litmus/features/dropdown/IFramePortal.js
 create mode 100644 litmus/features/dropdown/lookup-inside-iframe-portal.js
 create mode 100644 litmus/features/dropdown/lookup-inside-real-iframe.js
 create mode 100644 litmus/features/dropdown/style.scss

diff --git a/litmus/features/dropdown/IFramePortal.js b/litmus/features/dropdown/IFramePortal.js
new file mode 100644
index 000000000..850e8c92c
--- /dev/null
+++ b/litmus/features/dropdown/IFramePortal.js
@@ -0,0 +1,57 @@
+import { createPortal } from "react-dom";
+import { useEffect, useRef, useState } from "react";
+
+function copyStyles(sourceDoc, targetDoc) {
+   Array.from(sourceDoc.styleSheets).forEach((styleSheet) => {
+      try {
+         if (styleSheet.href) {
+            let link = targetDoc.createElement("link");
+            link.rel = "stylesheet";
+            link.href = styleSheet.href;
+            targetDoc.head.appendChild(link);
+         } else if (styleSheet.ownerNode && styleSheet.ownerNode.textContent) {
+            // dev builds inject theme/widget CSS as inline <style> tags (style-loader),
+            // which have no .href, so clone the tag's contents instead
+            let style = targetDoc.createElement("style");
+            style.textContent = styleSheet.ownerNode.textContent;
+            targetDoc.head.appendChild(style);
+         }
+      } catch (err) {
+         console.warn("IFramePortal: could not copy stylesheet", err);
+      }
+   });
+}
+
+// Renders `children` inside a same-origin iframe via a React portal, while the
+// <iframe> element itself stays a normal sibling in the outer document's DOM/layout.
+// Single React tree, single JS realm - only the DOM output is split across two
+// documents. This mirrors iframe-based style isolation helpers (e.g. react-frame-component).
+export const IFramePortal = ({ children, style }) => {
+   let iframeRef = useRef(null);
+   let [containerEl, setContainerEl] = useState(null);
+
+   useEffect(() => {
+      let iframeEl = iframeRef.current;
+
+      function handleLoad() {
+         let doc = iframeEl.contentDocument;
+         doc.body.style.margin = "0";
+         let container = doc.createElement("div");
+         doc.body.appendChild(container);
+         copyStyles(document, doc);
+         setContainerEl(container);
+      }
+
+      if (iframeEl.contentDocument.readyState === "complete") handleLoad();
+      else iframeEl.addEventListener("load", handleLoad);
+
+      return () => iframeEl.removeEventListener("load", handleLoad);
+   }, []);
+
+   return (
+      <div>
+         <iframe ref={iframeRef} style={style} />
+         {containerEl && createPortal(children, containerEl)}
+      </div>
+   );
+};
diff --git a/litmus/features/dropdown/lookup-inside-iframe-portal.js b/litmus/features/dropdown/lookup-inside-iframe-portal.js
new file mode 100644
index 000000000..36601da1a
--- /dev/null
+++ b/litmus/features/dropdown/lookup-inside-iframe-portal.js
@@ -0,0 +1,82 @@
+import { Controller, LabelsTopLayout } from "cx/ui";
+import { LookupField } from "cx/widgets";
+import { IFramePortal } from "./IFramePortal";
+import "./style.scss";
+
+// Bug repro: a LookupField's dropdown is expected to open right next to the field.
+// Here the field is rendered inside an <iframe> (via a React portal - single JS
+// realm/React tree, DOM split across two documents), and the iframe itself is
+// offset from the parent document's top-left corner. Opening the dropdown shows
+// it positioned away from the field, roughly shifted by the iframe's own
+// left/top offset within the parent document.
+
+class PageController extends Controller {
+   onInit() {
+      this.store.init("city", 1);
+      this.store.init("cities", [
+         { id: 1, text: "New York" },
+         { id: 2, text: "London" },
+         { id: 3, text: "Paris" },
+         { id: 4, text: "Berlin" },
+         { id: 5, text: "Tokyo" },
+         { id: 6, text: "Sydney" },
+         { id: 7, text: "Toronto" },
+         { id: 8, text: "Madrid" },
+      ]);
+   }
+}
+
+export default (
+   <cx>
+      <div style="font-family: sans-serif; display: flex; flexDirection: column;" controller={PageController}>
+         <p style="max-width: 420px; margin: 0 0 16px;">
+            Bug repro: The LookupField below is portaled inside an iframe that is offset from the top-left corner of the
+            parent document. Open the dropdown — it should appear directly above or below the field, but instead it is
+            positioned incorrectly elsewhere on the page.
+         </p>
+         <p style="max-width: 420px; margin: 0 0 16px;">
+            Setting inline=false on the inner lookup would fix the dropdown positioning, but it would prevent the
+            dropdown from being isolated from the parent document's stylesheets. Isolating the stylesheets is the
+            purpose of IFramePortal, so this is not a suitable workaround.
+         </p>
+
+         <p style="max-width: 420px; margin: 0 0 16px;">
+            The parent document's lookup has a red background, so the inline-rendered lookup inside IFramePortal will
+            pick up this style, while the other lookup will not. Since IFramePortal does not allow stylesheets from the
+            outer document to leak into the iframe, we achieve the desired style isolation on the other lookup.
+         </p>
+         <LabelsTopLayout>
+            <LookupField
+               label="Parent Document Lookup"
+               value-bind="city"
+               options-bind="cities"
+               placeholder="Select a city..."
+            />
+         </LabelsTopLayout>
+
+         <IFramePortal style={{ width: "1000px", height: "600px", marginLeft: "300px", border: "2px solid #c0392b" }}>
+            <div style="padding: 40px;">
+               <LabelsTopLayout>
+                  <LookupField
+                     class="inner-lookup"
+                     label="IFrame Portal Lookup (inline)"
+                     value-bind="city"
+                     options-bind="cities"
+                     placeholder="Select a city..."
+                     dropdownOptions={{
+                        inline: false,
+                     }}
+                  />
+                  <LookupField
+                     class="inner-lookup"
+                     label="IFrame Portal Lookup"
+                     value-bind="city"
+                     options-bind="cities"
+                     placeholder="Select a city..."
+                  />
+               </LabelsTopLayout>
+            </div>
+         </IFramePortal>
+      </div>
+   </cx>
+);
diff --git a/litmus/features/dropdown/lookup-inside-real-iframe.js b/litmus/features/dropdown/lookup-inside-real-iframe.js
new file mode 100644
index 000000000..0b1683c60
--- /dev/null
+++ b/litmus/features/dropdown/lookup-inside-real-iframe.js
@@ -0,0 +1,62 @@
+import { Controller, LabelsTopLayout } from "cx/ui";
+import { LookupField } from "cx/widgets";
+
+const isEmbedded = window.self !== window.top;
+
+class PageController extends Controller {
+   onInit() {
+      this.store.init("city", 1);
+      this.store.init("cities", [
+         { id: 1, text: "New York" },
+         { id: 2, text: "London" },
+         { id: 3, text: "Paris" },
+         { id: 4, text: "Berlin" },
+         { id: 5, text: "Tokyo" },
+         { id: 6, text: "Sydney" },
+         { id: 7, text: "Toronto" },
+         { id: 8, text: "Madrid" },
+      ]);
+   }
+}
+
+const LookupInFrame = (
+   <cx>
+      <div style="padding: 40px; font-family: sans-serif;" controller={PageController}>
+         <LabelsTopLayout>
+            <LookupField
+               label="Real IFrame Lookup"
+               value-bind="city"
+               options-bind="cities"
+               placeholder="Select a city..."
+            />
+         </LabelsTopLayout>
+      </div>
+   </cx>
+);
+
+const HostPage = (
+   <cx>
+      <div style="font-family: sans-serif; display: flex; flexDirection: column;" controller={PageController}>
+         <p style="max-width: 420px; margin: 0 0 16px;">
+            Bug repro (real iframe): the LookupField in the framed page below runs as a fully independent app in its own
+            iframe document/window (a genuine navigation via iframe src, not a React portal). Open its dropdown and
+            check whether it's positioned correctly relative to the field.
+         </p>
+         <LabelsTopLayout>
+            <LookupField
+               label="Parent Document Lookup"
+               value-bind="city"
+               options-bind="cities"
+               placeholder="Select a city..."
+            />
+         </LabelsTopLayout>
+
+         <iframe
+            src={window.location.href}
+            style="width: 1000px; height: 600px; margin-left: 300px; border: 2px solid #2980b9;"
+         />
+      </div>
+   </cx>
+);
+
+export default isEmbedded ? LookupInFrame : HostPage;
diff --git a/litmus/features/dropdown/style.scss b/litmus/features/dropdown/style.scss
new file mode 100644
index 000000000..bd525beda
--- /dev/null
+++ b/litmus/features/dropdown/style.scss
@@ -0,0 +1,9 @@
+.cxe-lookupfield-dropdown {
+   background: red;
+}
+
+.inner-lookup {
+   .cxe-lookupfield-dropdown {
+      background: blue;
+   }
+}
diff --git a/litmus/index.js b/litmus/index.js
index eb81a6ec2..0e5d05fb1 100644
--- a/litmus/index.js
+++ b/litmus/index.js
@@ -140,7 +140,9 @@ import "./index.scss";
 // import Demo from "./features/charts/PointReducer";
 // import Demo from "./features/charts/line-graph/LineGraph";
 // import Demo from "./features/charts/line-graph/SmoothingOvershoot";
-import Demo from "./features/window/resize-cursor";
+//import Demo from "./features/window/resize-cursor";
+import Demo from "./features/dropdown/lookup-inside-iframe-portal";
+// import Demo from "./features/dropdown/lookup-inside-real-iframe";
 // import Demo from "./bugs/GridDefaultSortFieldClearableSortIssue";
 // import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
 // import Demo from "./bugs/GridOnFetchRecords";
diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
index 83781e78d..5ae91d5b7 100644
--- a/packages/cx/src/util/getActiveElement.ts
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -1,4 +1,15 @@
 //IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(): Element {
-   return document.activeElement ?? document.body;
+export function getActiveElement(doc: Document = document): Element {
+   let active = doc.activeElement ?? doc.body;
+
+   //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
+   //<iframe> element itself - drill into its own document to find the element that's
+   //actually focused there (recursively, in case of nested iframes)
+   if (active && active.tagName === "IFRAME") {
+      const iframe = active as HTMLIFrameElement;
+      let frameDoc = iframe.contentDocument;
+      if (frameDoc) return getActiveElement(frameDoc);
+   }
+
+   return active;
 }
diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
index a41d1dba7..086167b53 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.tsx
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -7,11 +7,11 @@ import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import {
-  ConfigureOverlayContainerContext,
-  Overlay,
-  OverlayBase,
-  OverlayConfig,
-  OverlayInstance,
+   ConfigureOverlayContainerContext,
+   Overlay,
+   OverlayBase,
+   OverlayConfig,
+   OverlayInstance,
 } from "./Overlay";
 import { Instance } from "../../ui/Instance";
 import { StringProp } from "../../ui/Prop";
@@ -25,925 +25,936 @@ import { HtmlElement } from "../HtmlElement";
  */
 
 export interface DropdownConfig extends OverlayConfig {
-  /** Placement option for the dropdown relative to the trigger element. */
-  placement?: StringProp | null;
+   /** Placement option for the dropdown relative to the trigger element. */
+   placement?: StringProp | null;
 
-  /** Offset distance from the trigger element. */
-  offset?: number;
+   /** Offset distance from the trigger element. */
+   offset?: number;
 
-  /** Match the dropdown width to the trigger element. */
-  matchWidth?: boolean;
+   /** Match the dropdown width to the trigger element. */
+   matchWidth?: boolean;
 
-  /** Match the dropdown max-width to the trigger element. */
-  matchMaxWidth?: boolean;
+   /** Match the dropdown max-width to the trigger element. */
+   matchMaxWidth?: boolean;
 
-  /** Placement preference order. */
-  placementOrder?: string;
+   /** Placement preference order. */
+   placementOrder?: string;
 
-  /** Constrain the dropdown within the viewport. */
-  constrain?: boolean;
+   /** Constrain the dropdown within the viewport. */
+   constrain?: boolean;
 
-  /** Positioning strategy - "fixed", "absolute", or "auto". */
-  positioning?: string;
+   /** Positioning strategy - "fixed", "absolute", or "auto". */
+   positioning?: string;
 
-  /** Use touch-friendly positioning on touch devices. */
-  touchFriendly?: boolean;
+   /** Use touch-friendly positioning on touch devices. */
+   touchFriendly?: boolean;
 
-  /** Show an arrow pointing to the trigger element. */
-  arrow?: boolean;
+   /** Show an arrow pointing to the trigger element. */
+   arrow?: boolean;
 
-  /** Shift the dropdown so the arrow tip lines up with the target point (e.g. the mouse cursor for context menus). Only applies when `arrow` is also set. */
-  alignArrow?: boolean;
+   /** Shift the dropdown so the arrow tip lines up with the target point (e.g. the mouse cursor for context menus). Only applies when `arrow` is also set. */
+   alignArrow?: boolean;
 
-  /** Distance of the arrow tip from the dropdown's edge, in pixels. Override for the theme's default. */
-  arrowOffset?: number;
+   /** Distance of the arrow tip from the dropdown's edge, in pixels. Override for the theme's default. */
+   arrowOffset?: number;
 
-  /** Add padding around the dropdown. */
-  pad?: boolean;
+   /** Add padding around the dropdown. */
+   pad?: boolean;
 
-  /** Element explosion distance for positioning. */
-  elementExplode?: number;
+   /** Element explosion distance for positioning. */
+   elementExplode?: number;
 
-  /** Padding from screen edges. */
-  screenPadding?: number;
+   /** Padding from screen edges. */
+   screenPadding?: number;
 
-  /** First child element defines the height. */
-  firstChildDefinesHeight?: boolean;
+   /** First child element defines the height. */
+   firstChildDefinesHeight?: boolean;
 
-  /** First child element defines the width. */
-  firstChildDefinesWidth?: boolean;
+   /** First child element defines the width. */
+   firstChildDefinesWidth?: boolean;
 
-  /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
-  closeOnScrollDistance?: number;
+   /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
+   closeOnScrollDistance?: number;
 
-  /** The element to position the dropdown relative to. */
-  relatedElement?: Element;
+   /** The element to position the dropdown relative to. */
+   relatedElement?: Element;
 
-  /** Callback to resolve the related element. */
-  onResolveRelatedElement?:
-    | string
-    | ((beaconEl: Element, instance: any) => Element);
+   /** Callback to resolve the related element. */
+   onResolveRelatedElement?:
+   | string
+   | ((beaconEl: Element, instance: any) => Element);
 
-  /** Callback to measure natural content size. */
-  onMeasureNaturalContentSize?:
-    | string
-    | ((el: Element, instance: any) => { width?: number; height?: number });
+   /** Callback to measure natural content size. */
+   onMeasureNaturalContentSize?:
+   | string
+   | ((el: Element, instance: any) => { width?: number; height?: number });
 
-  /** Callback when dropdown mounts. */
-  onDropdownDidMount?: string;
+   /** Callback when dropdown mounts. */
+   onDropdownDidMount?: string;
 
-  /** Callback to validate dropdown position. */
-  pipeValidateDropdownPosition?: string;
+   /** Callback to validate dropdown position. */
+   pipeValidateDropdownPosition?: string;
 
-  /** Callback when dropdown is dismissed after scroll. */
-  onDismissAfterScroll?: string;
+   /** Callback when dropdown is dismissed after scroll. */
+   onDismissAfterScroll?: string;
 
-  /** Track mouse position for dropdowns. */
-  trackMouse?: boolean;
+   /** Track mouse position for dropdowns. */
+   trackMouse?: boolean;
 
-  /** Track mouse X position. */
-  trackMouseX?: boolean;
+   /** Track mouse X position. */
+   trackMouseX?: boolean;
 
-  /** Track mouse Y position. */
-  trackMouseY?: boolean;
+   /** Track mouse Y position. */
+   trackMouseY?: boolean;
 
-  /** Cover the related element with dropdown. */
-  cover?: boolean;
+   /** Cover the related element with dropdown. */
+   cover?: boolean;
 }
 
 export class DropdownInstance<
-  WidgetType extends DropdownBase<any, any> = Dropdown,
+   WidgetType extends DropdownBase<any, any> = Dropdown,
 > extends OverlayInstance<WidgetType> {
-  mousePosition?: any;
-  parentPositionChangeEvent?: any;
-  initialScreenPosition?: any;
-  relatedElement?: HTMLElement;
-  needsBeacon?: boolean;
+   mousePosition?: any;
+   parentPositionChangeEvent?: any;
+   initialScreenPosition?: any;
+   relatedElement?: HTMLElement;
+   needsBeacon?: boolean;
 }
 
 export class DropdownBase<
-  Config extends DropdownConfig = DropdownConfig,
-  InstanceType extends DropdownInstance<any> = DropdownInstance<any>,
+   Config extends DropdownConfig = DropdownConfig,
+   InstanceType extends DropdownInstance<any> = DropdownInstance<any>,
 > extends OverlayBase<Config, InstanceType> {
-  declare trackMouse?: boolean;
-  declare trackMouseX?: boolean;
-  declare trackMouseY?: boolean;
-  declare offset: number;
-  declare matchWidth?: boolean;
-  declare matchMaxWidth?: boolean;
-  declare placementOrder: string;
-  declare placement?: StringProp | null;
-  declare constrain?: boolean;
-  declare positioning?: string;
-  declare touchFriendly?: boolean;
-  declare arrow?: boolean;
-  declare alignArrow?: boolean;
-  declare arrowOffset?: number;
-  declare elementExplode?: number;
-  declare screenPadding: number;
-  declare firstChildDefinesHeight?: boolean;
-  declare firstChildDefinesWidth?: boolean;
-  declare closeOnScrollDistance: number;
-  declare relatedElement?: HTMLElement;
-  declare onResolveRelatedElement?:
-    | string
-    | ((beaconEl: Element, instance: any) => Element);
-  declare onMeasureNaturalContentSize?:
-    | string
-    | ((el: Element, instance: any) => { width?: number; height?: number });
-  declare onDropdownDidMount?: string;
-  declare pipeValidateDropdownPosition?: string;
-  declare onDismissAfterScroll?: string;
-  declare onKeyDown?: string;
-  declare cover?: boolean;
-  declare mousePosition?: any;
-  declare mouseTrap?: boolean;
-  declare createDelay?: number;
-
-  init() {
-    if (this.trackMouse) {
-      this.trackMouseX = true;
-      this.trackMouseY = true;
-    }
-    if (this.autoFocus && !this.hasOwnProperty("focusable"))
-      this.focusable = true;
-    super.init();
-  }
-
-  declareData(...args: any[]) {
-    return super.declareData(...args, {
-      placement: undefined,
-    });
-  }
-
-  initInstance(context: RenderingContext, instance: InstanceType): void {
-    instance.mousePosition = this.mousePosition;
-    instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
-    super.initInstance(context, instance);
-  }
-
-  prepareData(context: RenderingContext, instance: InstanceType): void {
-    super.prepareData(context, instance);
-    if (this.arrowOffset != null) {
-      instance.data.style = {
-        ...instance.data.style,
-        "--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
-      };
-    }
-  }
-
-  explore(context: RenderingContext, instance: InstanceType): void {
-    context.push("lastDropdown", instance);
-    super.explore(context, instance);
-  }
-
-  exploreCleanup(context: RenderingContext, instance: InstanceType): void {
-    context.pop("lastDropdown");
-    super.exploreCleanup(context, instance);
-  }
-
-  overlayDidMount(instance: InstanceType, component: any): void {
-    super.overlayDidMount(instance, component);
-    var scrollableParents: Element[] = (component.scrollableParents = [
-      window as any,
-    ]);
-    component.updateDropdownPosition = (e: any) =>
+   declare trackMouse?: boolean;
+   declare trackMouseX?: boolean;
+   declare trackMouseY?: boolean;
+   declare offset: number;
+   declare matchWidth?: boolean;
+   declare matchMaxWidth?: boolean;
+   declare placementOrder: string;
+   declare placement?: StringProp | null;
+   declare constrain?: boolean;
+   declare positioning?: string;
+   declare touchFriendly?: boolean;
+   declare arrow?: boolean;
+   declare alignArrow?: boolean;
+   declare arrowOffset?: number;
+   declare elementExplode?: number;
+   declare screenPadding: number;
+   declare firstChildDefinesHeight?: boolean;
+   declare firstChildDefinesWidth?: boolean;
+   declare closeOnScrollDistance: number;
+   declare relatedElement?: HTMLElement;
+   declare onResolveRelatedElement?:
+      | string
+      | ((beaconEl: Element, instance: any) => Element);
+   declare onMeasureNaturalContentSize?:
+      | string
+      | ((el: Element, instance: any) => { width?: number; height?: number });
+   declare onDropdownDidMount?: string;
+   declare pipeValidateDropdownPosition?: string;
+   declare onDismissAfterScroll?: string;
+   declare onKeyDown?: string;
+   declare cover?: boolean;
+   declare mousePosition?: any;
+   declare mouseTrap?: boolean;
+   declare createDelay?: number;
+
+   init() {
+      if (this.trackMouse) {
+         this.trackMouseX = true;
+         this.trackMouseY = true;
+      }
+      if (this.autoFocus && !this.hasOwnProperty("focusable"))
+         this.focusable = true;
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         placement: undefined,
+      });
+   }
+
+   initInstance(context: RenderingContext, instance: InstanceType): void {
+      instance.mousePosition = this.mousePosition;
+      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+      super.initInstance(context, instance);
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType): void {
+      super.prepareData(context, instance);
+      if (this.arrowOffset != null) {
+         instance.data.style = {
+            ...instance.data.style,
+            "--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
+         };
+      }
+   }
+
+   explore(context: RenderingContext, instance: InstanceType): void {
+      context.push("lastDropdown", instance);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: InstanceType): void {
+      context.pop("lastDropdown");
+      super.exploreCleanup(context, instance);
+   }
+
+   overlayDidMount(instance: InstanceType, component: any): void {
+      super.overlayDidMount(instance, component);
+      var scrollableParents: Element[] = (component.scrollableParents = [
+         window as any,
+      ]);
+      component.updateDropdownPosition = (e: any) =>
+         this.updateDropdownPosition(instance, component);
+
+      instance.initialScreenPosition = null;
+
+      var el = instance.relatedElement?.parentElement;
+      while (el) {
+         scrollableParents.push(el);
+         el = el.parentElement;
+      }
+      scrollableParents.forEach((el: any) => {
+         el.addEventListener("scroll", component.updateDropdownPosition);
+      });
+      component.offResize = ResizeManager.subscribe(
+         component.updateDropdownPosition,
+      );
+
+      if (this.onDropdownDidMount)
+         instance.invoke("onDropdownDidMount", instance, component);
+
+      if (this.pipeValidateDropdownPosition)
+         instance.invoke(
+            "pipeValidateDropdownPosition",
+            component.updateDropdownPosition,
+            instance,
+         );
+
+      if (instance.parentPositionChangeEvent)
+         component.offParentPositionChange =
+            instance.parentPositionChangeEvent.subscribe(
+               component.updateDropdownPosition,
+            );
+   }
+
+   overlayDidUpdate(instance: InstanceType, component: any): void {
       this.updateDropdownPosition(instance, component);
+   }
+
+   overlayWillUnmount(instance: InstanceType, component: any): void {
+      var { scrollableParents } = component;
+      if (scrollableParents) {
+         scrollableParents.forEach((el: Element) => {
+            el.removeEventListener("scroll", component.updateDropdownPosition);
+         });
+         delete component.scrollableParents;
+         delete component.updateDropdownPosition;
+      }
+      if (component.offResize) component.offResize();
 
-    instance.initialScreenPosition = null;
-
-    var el = instance.relatedElement?.parentElement;
-    while (el) {
-      scrollableParents.push(el);
-      el = el.parentElement;
-    }
-    scrollableParents.forEach((el: any) => {
-      el.addEventListener("scroll", component.updateDropdownPosition);
-    });
-    component.offResize = ResizeManager.subscribe(
-      component.updateDropdownPosition,
-    );
-
-    if (this.onDropdownDidMount)
-      instance.invoke("onDropdownDidMount", instance, component);
-
-    if (this.pipeValidateDropdownPosition)
-      instance.invoke(
-        "pipeValidateDropdownPosition",
-        component.updateDropdownPosition,
-        instance,
-      );
+      if (this.pipeValidateDropdownPosition)
+         instance.invoke("pipeValidateDropdownPosition", null, instance);
 
-    if (instance.parentPositionChangeEvent)
-      component.offParentPositionChange =
-        instance.parentPositionChangeEvent.subscribe(
-          component.updateDropdownPosition,
-        );
-  }
-
-  overlayDidUpdate(instance: InstanceType, component: any): void {
-    this.updateDropdownPosition(instance, component);
-  }
-
-  overlayWillUnmount(instance: InstanceType, component: any): void {
-    var { scrollableParents } = component;
-    if (scrollableParents) {
-      scrollableParents.forEach((el: Element) => {
-        el.removeEventListener("scroll", component.updateDropdownPosition);
-      });
-      delete component.scrollableParents;
-      delete component.updateDropdownPosition;
-    }
-    if (component.offResize) component.offResize();
-
-    if (this.pipeValidateDropdownPosition)
-      instance.invoke("pipeValidateDropdownPosition", null, instance);
-
-    if (component.offParentPositionChange) component.offParentPositionChange();
-
-    delete component.parentBounds;
-    delete component.initialScreenPosition;
-  }
-
-  dismissAfterScroll(data: any, instance: InstanceType, component: any): void {
-    if (
-      this.onDismissAfterScroll &&
-      instance.invoke("onDismissAfterScroll", data, instance, component) ===
-        false
-    )
-      return;
-    if (instance.dismiss) instance.dismiss();
-  }
-
-  updateDropdownPosition(instance: InstanceType, component: any): void {
-    var { el, initialScreenPosition } = component;
-    var { data, relatedElement } = instance;
-    var parentBounds = getTopLevelBoundingClientRect(relatedElement!);
-
-    //getBoundingClientRect() will return an empty rect if the element is hidden or removed
-    if (
-      parentBounds.left == 0 &&
-      parentBounds.top == 0 &&
-      parentBounds.bottom == 0 &&
-      parentBounds.right == 0
-    ) {
-      if (!component.parentBounds) return;
-      parentBounds = component.parentBounds;
-    } else component.parentBounds = parentBounds;
-
-    if (this.trackMouseX && instance.mousePosition) {
-      parentBounds = new DOMRect(
-        instance.mousePosition.x,
-        parentBounds.top,
-        0,
-        parentBounds.bottom - parentBounds.top,
-      );
-    }
-
-    if (this.trackMouseY && instance.mousePosition) {
-      parentBounds = new DOMRect(
-        parentBounds.left,
-        instance.mousePosition.y,
-        parentBounds.right - parentBounds.left,
-        0,
-      );
-    }
-
-    let explode =
-      this.pad && typeof this.elementExplode === "number"
-        ? this.elementExplode
-        : 0;
-    if (explode) {
-      parentBounds = new DOMRect(
-        Math.round(parentBounds.left - explode),
-        Math.round(parentBounds.top - explode),
-        Math.round(parentBounds.right - parentBounds.left + 2 * explode),
-        Math.round(parentBounds.bottom - parentBounds.top + 2 * explode),
-      );
-    }
-
-    var style: any = {};
-    if (this.matchWidth)
-      style.minWidth = `${parentBounds.right - parentBounds.left}px`;
-    if (this.matchMaxWidth)
-      style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
-
-    var contentSize = this.measureNaturalDropdownSize(instance, component);
-    var placement = this.findOptimalPlacement(
-      contentSize,
-      parentBounds,
-      data.placement,
-      component.lastPlacement,
-    );
-
-    var arrowAdjust = this.getArrowAdjust(component);
-
-    this.applyPositioningPlacementStyles(
-      style,
-      placement,
-      contentSize,
-      parentBounds,
-      el,
-      false,
-      arrowAdjust,
-    );
-    component.setCustomStyle(style);
-    this.setDirectionClass(component, placement);
-
-    if (this.constrain) {
-      //recheck content size for changes as sometimes when auto is used the size can change
-      let newContentSize = this.measureNaturalDropdownSize(instance, component);
+      if (component.offParentPositionChange) component.offParentPositionChange();
+
+      delete component.parentBounds;
+      delete component.initialScreenPosition;
+   }
+
+   dismissAfterScroll(data: any, instance: InstanceType, component: any): void {
       if (
-        newContentSize.width != contentSize.width ||
-        newContentSize.height != contentSize.height
+         this.onDismissAfterScroll &&
+         instance.invoke("onDismissAfterScroll", data, instance, component) ===
+         false
+      )
+         return;
+      if (instance.dismiss) instance.dismiss();
+   }
+
+   updateDropdownPosition(instance: InstanceType, component: any): void {
+      var { el, initialScreenPosition } = component;
+      var { data, relatedElement } = instance;
+
+      //if the dropdown renders in the same document as its related element (e.g. not
+      //portaled to the top-level body, such as an inline dropdown living inside an
+      //iframe together with its field), no cross-document offset should be applied -
+      //getBoundingClientRect() is already relative to that shared document/viewport.
+      var isSameDocument = el && relatedElement && el.ownerDocument === relatedElement.ownerDocument;
+      var parentBounds = isSameDocument
+         ? relatedElement!.getBoundingClientRect()
+         : getTopLevelBoundingClientRect(relatedElement!);
+
+      //getBoundingClientRect() will return an empty rect if the element is hidden or removed
+      if (
+         parentBounds.left == 0 &&
+         parentBounds.top == 0 &&
+         parentBounds.bottom == 0 &&
+         parentBounds.right == 0
       ) {
-        let newStyle = {};
-        this.applyPositioningPlacementStyles(
-          newStyle,
-          placement,
-          newContentSize,
-          parentBounds,
-          el,
-          true,
-          arrowAdjust,
-        );
-        component.setCustomStyle(newStyle);
+         if (!component.parentBounds) return;
+         parentBounds = component.parentBounds;
+      } else component.parentBounds = parentBounds;
+
+      if (this.trackMouseX && instance.mousePosition) {
+         parentBounds = new DOMRect(
+            instance.mousePosition.x,
+            parentBounds.top,
+            0,
+            parentBounds.bottom - parentBounds.top,
+         );
       }
-    }
-
-    if (!initialScreenPosition)
-      initialScreenPosition = component.initialScreenPosition = parentBounds;
-
-    if (
-      (!this.trackMouseY &&
-        Math.abs(parentBounds.top - initialScreenPosition.top) >
-          this.closeOnScrollDistance) ||
-      (!this.trackMouseX &&
-        Math.abs(parentBounds.left - initialScreenPosition.left) >
-          this.closeOnScrollDistance)
-    )
-      this.dismissAfterScroll(
-        { parentBounds, initialScreenPosition },
-        instance,
-        component,
+
+      if (this.trackMouseY && instance.mousePosition) {
+         parentBounds = new DOMRect(
+            parentBounds.left,
+            instance.mousePosition.y,
+            parentBounds.right - parentBounds.left,
+            0,
+         );
+      }
+
+      let explode =
+         this.pad && typeof this.elementExplode === "number"
+            ? this.elementExplode
+            : 0;
+      if (explode) {
+         parentBounds = new DOMRect(
+            Math.round(parentBounds.left - explode),
+            Math.round(parentBounds.top - explode),
+            Math.round(parentBounds.right - parentBounds.left + 2 * explode),
+            Math.round(parentBounds.bottom - parentBounds.top + 2 * explode),
+         );
+      }
+
+      var style: any = {};
+      if (this.matchWidth)
+         style.minWidth = `${parentBounds.right - parentBounds.left}px`;
+      if (this.matchMaxWidth)
+         style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
+
+      var contentSize = this.measureNaturalDropdownSize(instance, component);
+      var placement = this.findOptimalPlacement(
+         contentSize,
+         parentBounds,
+         data.placement,
+         component.lastPlacement,
+         el
       );
 
-    instance.positionChangeSubscribers.notify();
-  }
-
-  getArrowAdjust(component: any): number {
-    if (!this.alignArrow || !this.arrow) return 0;
-    if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
-    if (!component.el) return 0;
-    let raw = getComputedStyle(component.el)
-      .getPropertyValue("--cx-scss-dropdown-arrow-offset")
-      .trim();
-    let parsed = parseFloat(raw);
-    if (!isFinite(parsed)) return 0;
-    component.cachedArrowOffset = parsed;
-    return parsed;
-  }
-
-  applyFixedPositioningPlacementStyles(
-    style: any,
-    placement: string,
-    contentSize: any,
-    rel: any,
-    el: HTMLElement,
-    noAuto: boolean,
-    arrowAdjust: number = 0,
-  ): void {
-    let viewport = getViewportRect(this.screenPadding);
-    style.position = "fixed";
-
-    if (placement.startsWith("down")) {
-      style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
-      let bottom =
-        viewport.bottom - (rel.bottom + this.offset + contentSize.height);
-      style.bottom =
-        this.constrain && (noAuto || bottom < this.screenPadding + 10)
-          ? Math.max(this.screenPadding, bottom) + "px"
-          : "auto";
-    } else if (placement.startsWith("up")) {
-      let top = rel.top - this.offset - contentSize.height - viewport.top;
-      style.top =
-        this.constrain && (noAuto || top < this.screenPadding + 10)
-          ? Math.max(this.screenPadding, top) + "px"
-          : "auto";
-      style.bottom =
-        document.documentElement.offsetHeight -
-        (this.cover ? rel.bottom : rel.top) +
-        this.offset +
-        "px";
-    }
-
-    switch (placement) {
-      case "down":
-      case "down-center":
-        style.right = "auto";
-        style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-        break;
-
-      case "down-right":
-        style.right = "auto";
-        style.left = `${rel.left - arrowAdjust}px`;
-        break;
-
-      case "down-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
-        style.left = "auto";
-        break;
-
-      case "up":
-      case "up-center":
-        style.right = "auto";
-        style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-        break;
-
-      case "up-right":
-        style.right = "auto";
-        style.left = `${rel.left - arrowAdjust}px`;
-        break;
-
-      case "up-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
-        style.left = "auto";
-        break;
-
-      case "right":
-      case "right-center":
-        style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-        style.right = "auto";
-        style.bottom = "auto";
-        style.left = `${rel.right + this.offset}px`;
-        break;
-
-      case "right-down":
-        style.top = `${rel.top - arrowAdjust}px`;
-        style.right = "auto";
-        style.bottom = "auto";
-        style.left = `${rel.right + this.offset}px`;
-        break;
-
-      case "right-up":
-        style.top = "auto";
-        style.right = "auto";
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
-        style.left = `${rel.right + this.offset}px`;
-        break;
-
-      case "left":
-      case "left-center":
-        style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = "auto";
-        style.left = "auto";
-        break;
-
-      case "left-down":
-        style.top = `${rel.top - arrowAdjust}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = "auto";
-        style.left = "auto";
-        break;
-
-      case "left-up":
-        style.top = "auto";
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
-        style.left = "auto";
-        break;
-
-      case "screen-center":
-        let w = Math.min(
-          contentSize.width,
-          document.documentElement.offsetWidth - 2 * this.screenPadding,
-        );
-        let h = Math.min(
-          contentSize.height,
-          document.documentElement.offsetHeight - 2 * this.screenPadding,
-        );
-        style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-        style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-        break;
-    }
-  }
-
-  applyAbsolutePositioningPlacementStyles(
-    style: any,
-    placement: string,
-    contentSize: any,
-    rel: any,
-    el: HTMLElement,
-    noAuto: boolean,
-    arrowAdjust: number = 0,
-  ): void {
-    var viewport = getViewportRect(this.screenPadding);
-
-    style.position = "absolute";
-
-    if (placement.startsWith("down")) {
-      style.top = `${rel.bottom - rel.top + this.offset}px`;
-      let room = viewport.bottom - rel.bottom + this.offset;
-      style.bottom =
-        this.constrain && (noAuto || contentSize.height >= room - 10)
-          ? `${-Math.min(room, contentSize.height)}px`
-          : "auto";
-    } else if (placement.startsWith("up")) {
-      let room = rel.top - this.offset - viewport.top;
-      style.top =
-        this.constrain && (noAuto || contentSize.height >= room - 10)
-          ? `${-Math.min(room, contentSize.height)}px`
-          : "auto";
-      style.bottom = `${rel.bottom - rel.top - this.offset}px`;
-    }
-
-    switch (placement) {
-      case "down":
-      case "down-center":
-        style.right = "auto";
-        style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-        break;
-
-      case "down-right":
-        style.right = "auto";
-        style.left = `${-arrowAdjust}px`;
-        break;
-
-      case "down-left":
-        style.right = `${-arrowAdjust}px`;
-        style.left = "auto";
-        break;
-
-      case "up":
-      case "up-center":
-        style.right = "auto";
-        style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-        break;
-
-      case "up-right":
-        style.right = "auto";
-        style.left = `${-arrowAdjust}px`;
-        break;
-
-      case "up-left":
-        style.right = `${-arrowAdjust}px`;
-        style.left = "auto";
-        break;
-
-      case "right":
-      case "right-center":
-        style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-        style.right = "auto";
-        style.bottom = "auto";
-        style.left = `${rel.right - rel.left + this.offset}px`;
-        break;
-
-      case "right-down":
-        style.top = `${-arrowAdjust}px`;
-        style.right = "auto";
-        style.bottom = "auto";
-        style.left = `${rel.right - rel.left + this.offset}px`;
-        break;
-
-      case "right-up":
-        style.top = "auto";
-        style.right = "auto";
-        style.bottom = `${-arrowAdjust}px`;
-        style.left = `${rel.right - rel.left + this.offset}px`;
-        break;
-
-      case "left":
-      case "left-center":
-        style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-        style.right = `${rel.right - rel.left + this.offset}px`;
-        style.bottom = "auto";
-        style.left = "auto";
-        break;
-
-      case "left-down":
-        style.top = `${-arrowAdjust}px`;
-        style.right = `${rel.right - rel.left + this.offset}px`;
-        style.bottom = "auto";
-        style.left = "auto";
-        break;
-
-      case "left-up":
-        style.top = "auto";
-        style.right = `${rel.right - rel.left + this.offset}px`;
-        style.bottom = `${-arrowAdjust}px`;
-        style.left = "auto";
-        break;
-    }
-  }
-
-  applyPositioningPlacementStyles(
-    style: any,
-    placement: string,
-    contentSize: any,
-    parentBounds: any,
-    el: HTMLElement,
-    noAuto: boolean,
-    arrowAdjust: number = 0,
-  ): void {
-    switch (this.positioning) {
-      case "absolute":
-        this.applyAbsolutePositioningPlacementStyles(
-          style,
-          placement,
-          contentSize,
-          parentBounds,
-          el,
-          noAuto,
-          arrowAdjust,
-        );
-        break;
-
-      case "auto":
-        if (isTouchDevice())
-          this.applyAbsolutePositioningPlacementStyles(
-            style,
-            placement,
-            contentSize,
-            parentBounds,
-            el,
-            noAuto,
-            arrowAdjust,
-          );
-        else
-          this.applyFixedPositioningPlacementStyles(
-            style,
-            placement,
-            contentSize,
-            parentBounds,
-            el,
-            noAuto,
-            arrowAdjust,
-          );
-        break;
-
-      default:
-        this.applyFixedPositioningPlacementStyles(
-          style,
-          placement,
-          contentSize,
-          parentBounds,
-          el,
-          noAuto,
-          arrowAdjust,
-        );
-        break;
-    }
-  }
-
-  setDirectionClass(component: any, placement: string): void {
-    var state = {
-      "place-left": false,
-      "place-right": false,
-      "place-up": false,
-      "place-down": false,
-    };
-
-    component.lastPlacement = placement;
-
-    component.setCSSState({
-      ...state,
-      ["place-" + placement]: true,
-    });
-  }
-
-  measureNaturalDropdownSize(instance: InstanceType, component: any): any {
-    var { el } = component;
-    var size = {
-      width: el.offsetWidth,
-      height: this.constrain
-        ? calculateNaturalElementHeight(el)
-        : el.offsetHeight - el.clientHeight + el.scrollHeight,
-    };
-
-    if (this.firstChildDefinesHeight && el.firstChild) {
-      size.height = el.firstChild.offsetHeight;
-    }
-
-    if (this.firstChildDefinesWidth && el.firstChild) {
-      size.width = el.firstChild.offsetWidth;
-    }
-
-    if (this.onMeasureNaturalContentSize) {
-      var more = instance.invoke(
-        "onMeasureNaturalContentSize",
-        el,
-        instance,
-        component,
+      var arrowAdjust = this.getArrowAdjust(component);
+
+      this.applyPositioningPlacementStyles(
+         style,
+         placement,
+         contentSize,
+         parentBounds,
+         el,
+         false,
+         arrowAdjust,
       );
-      Object.assign(size, more);
-    }
-
-    return size;
-  }
-
-  findOptimalPlacement(
-    contentSize: any,
-    target: any,
-    placement: string,
-    lastPlacement: any,
-  ): any {
-    var placementOrder = this.placementOrder.split(" ");
-    var best = lastPlacement || placement;
-    var first;
-
-    var score: Record<string, number> = {};
-    var viewport = getViewportRect();
-
-    for (var i = 0; i < placementOrder.length; i++) {
-      var p = placementOrder[i];
-      if (!first) first = p;
-      var parts = p.split("-");
-
-      var primary = parts[0];
-      var secondary = parts[1] || "center";
-
-      score[p] = 0;
-      var vertical = true;
-
-      switch (primary) {
-        case "down":
-          score[p] +=
-            3 *
-            Math.min(
-              1,
-              (viewport.bottom - target.bottom - this.offset) /
-                contentSize.height,
+      component.setCustomStyle(style);
+      this.setDirectionClass(component, placement);
+
+      if (this.constrain) {
+         //recheck content size for changes as sometimes when auto is used the size can change
+         let newContentSize = this.measureNaturalDropdownSize(instance, component);
+         if (
+            newContentSize.width != contentSize.width ||
+            newContentSize.height != contentSize.height
+         ) {
+            let newStyle = {};
+            this.applyPositioningPlacementStyles(
+               newStyle,
+               placement,
+               newContentSize,
+               parentBounds,
+               el,
+               true,
+               arrowAdjust,
+            );
+            component.setCustomStyle(newStyle);
+         }
+      }
+
+      if (!initialScreenPosition)
+         initialScreenPosition = component.initialScreenPosition = parentBounds;
+
+      if (
+         (!this.trackMouseY &&
+            Math.abs(parentBounds.top - initialScreenPosition.top) >
+            this.closeOnScrollDistance) ||
+         (!this.trackMouseX &&
+            Math.abs(parentBounds.left - initialScreenPosition.left) >
+            this.closeOnScrollDistance)
+      )
+         this.dismissAfterScroll(
+            { parentBounds, initialScreenPosition },
+            instance,
+            component,
+         );
+
+      instance.positionChangeSubscribers.notify();
+   }
+
+   getArrowAdjust(component: any): number {
+      if (!this.alignArrow || !this.arrow) return 0;
+      if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
+      if (!component.el) return 0;
+      let raw = getComputedStyle(component.el)
+         .getPropertyValue("--cx-scss-dropdown-arrow-offset")
+         .trim();
+      let parsed = parseFloat(raw);
+      if (!isFinite(parsed)) return 0;
+      component.cachedArrowOffset = parsed;
+      return parsed;
+   }
+
+   applyFixedPositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      rel: any,
+      el: HTMLElement,
+      noAuto: boolean,
+      arrowAdjust: number = 0,
+   ): void {
+      let doc = el.ownerDocument || document;
+      let viewport = getViewportRect(this.screenPadding);
+      style.position = "fixed";
+
+      if (placement.startsWith("down")) {
+         style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
+         let bottom =
+            viewport.bottom - (rel.bottom + this.offset + contentSize.height);
+         style.bottom =
+            this.constrain && (noAuto || bottom < this.screenPadding + 10)
+               ? Math.max(this.screenPadding, bottom) + "px"
+               : "auto";
+      } else if (placement.startsWith("up")) {
+         let top = rel.top - this.offset - contentSize.height - viewport.top;
+         style.top =
+            this.constrain && (noAuto || top < this.screenPadding + 10)
+               ? Math.max(this.screenPadding, top) + "px"
+               : "auto";
+         style.bottom =
+            doc.documentElement.offsetHeight -
+            (this.cover ? rel.bottom : rel.top) +
+            this.offset +
+            "px";
+      }
+
+      switch (placement) {
+         case "down":
+         case "down-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "down-right":
+            style.right = "auto";
+            style.left = `${rel.left - arrowAdjust}px`;
+            break;
+
+         case "down-left":
+            style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+            style.left = "auto";
+            break;
+
+         case "up":
+         case "up-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "up-right":
+            style.right = "auto";
+            style.left = `${rel.left - arrowAdjust}px`;
+            break;
+
+         case "up-left":
+            style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+            style.left = "auto";
+            break;
+
+         case "right":
+         case "right-center":
+            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "right-down":
+            style.top = `${rel.top - arrowAdjust}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "right-up":
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+            style.left = `${rel.right + this.offset}px`;
+            break;
+
+         case "left":
+         case "left-center":
+            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-down":
+            style.top = `${rel.top - arrowAdjust}px`;
+            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-up":
+            style.top = "auto";
+            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+            style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+            style.left = "auto";
+            break;
+
+         case "screen-center":
+            let w = Math.min(
+               contentSize.width,
+               doc.documentElement.offsetWidth - 2 * this.screenPadding,
             );
-          break;
-
-        case "up":
-          score[p] +=
-            3 *
-            Math.min(
-              1,
-              (target.top - viewport.top - this.offset) / contentSize.height,
+            let h = Math.min(
+               contentSize.height,
+               doc.documentElement.offsetHeight - 2 * this.screenPadding,
             );
-          break;
-
-        case "right":
-          score[p] +=
-            target.right + contentSize.width + this.offset < viewport.right
-              ? 3
-              : 0;
-          vertical = false;
-          break;
-
-        case "left":
-          score[p] +=
-            target.left - contentSize.width - this.offset >= viewport.left
-              ? 3
-              : 0;
-          vertical = false;
-          break;
+            style.top = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
+            style.right = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
+            style.bottom = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
+            style.left = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
+            break;
+      }
+   }
+
+   applyAbsolutePositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      rel: any,
+      el: HTMLElement,
+      noAuto: boolean,
+      arrowAdjust: number = 0,
+   ): void {
+      var viewport = getViewportRect(this.screenPadding, el.ownerDocument || document);
+
+      style.position = "absolute";
+
+      if (placement.startsWith("down")) {
+         style.top = `${rel.bottom - rel.top + this.offset}px`;
+         let room = viewport.bottom - rel.bottom + this.offset;
+         style.bottom =
+            this.constrain && (noAuto || contentSize.height >= room - 10)
+               ? `${-Math.min(room, contentSize.height)}px`
+               : "auto";
+      } else if (placement.startsWith("up")) {
+         let room = rel.top - this.offset - viewport.top;
+         style.top =
+            this.constrain && (noAuto || contentSize.height >= room - 10)
+               ? `${-Math.min(room, contentSize.height)}px`
+               : "auto";
+         style.bottom = `${rel.bottom - rel.top - this.offset}px`;
       }
 
-      switch (secondary) {
-        case "center":
-          if (vertical) {
-            score[p] +=
-              (target.right + target.left - contentSize.width) / 2 >=
-              viewport.left
-                ? 1
-                : 0;
-            score[p] +=
-              (target.right + target.left + contentSize.width) / 2 <
-              viewport.right
-                ? 1
-                : 0;
-          } else {
-            score[p] +=
-              (target.bottom + target.top - contentSize.height) / 2 >=
-              viewport.top
-                ? 1
-                : 0;
-            score[p] +=
-              (target.bottom + target.top + contentSize.height) / 2 <
-              viewport.bottom
-                ? 1
-                : 0;
-          }
-          break;
-
-        case "right":
-          score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
-          break;
-
-        case "left":
-          score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
-          break;
-
-        case "up":
-          score[p] +=
-            target.bottom - contentSize.height >= viewport.top ? 2 : 0;
-          break;
-
-        case "down":
-          score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
-          break;
+      switch (placement) {
+         case "down":
+         case "down-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "down-right":
+            style.right = "auto";
+            style.left = `${-arrowAdjust}px`;
+            break;
+
+         case "down-left":
+            style.right = `${-arrowAdjust}px`;
+            style.left = "auto";
+            break;
+
+         case "up":
+         case "up-center":
+            style.right = "auto";
+            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+            break;
+
+         case "up-right":
+            style.right = "auto";
+            style.left = `${-arrowAdjust}px`;
+            break;
+
+         case "up-left":
+            style.right = `${-arrowAdjust}px`;
+            style.left = "auto";
+            break;
+
+         case "right":
+         case "right-center":
+            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "right-down":
+            style.top = `${-arrowAdjust}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "right-up":
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `${-arrowAdjust}px`;
+            style.left = `${rel.right - rel.left + this.offset}px`;
+            break;
+
+         case "left":
+         case "left-center":
+            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-down":
+            style.top = `${-arrowAdjust}px`;
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            break;
+
+         case "left-up":
+            style.top = "auto";
+            style.right = `${rel.right - rel.left + this.offset}px`;
+            style.bottom = `${-arrowAdjust}px`;
+            style.left = "auto";
+            break;
       }
-    }
-
-    if (!(best in score)) best = first;
-
-    for (var k in score) if (score[k] > score[best]) best = k;
-
-    if (this.touchFriendly && isTouchDevice() && score[best] < 5)
-      return "screen-center";
-
-    return best;
-  }
-
-  handleKeyDown(e: React.KeyboardEvent, instance: InstanceType) {
-    switch (e.keyCode) {
-      case 27: //esc
-        var focusable = findFirst(instance.relatedElement!, isFocusable);
-        if (focusable) focusable.focus();
-        e.stopPropagation();
-        e.preventDefault();
-        break;
-    }
-
-    if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
-  }
-
-  renderContents(context: RenderingContext, instance: InstanceType) {
-    let { CSS, baseClass } = this;
-    let result = [super.renderContents(context, instance)];
-    if (this.arrow) {
-      result.push(
-        <div
-          key="arrow-border"
-          className={CSS.element(baseClass, "arrow-border")}
-        ></div>,
-        <div
-          key="arrow-back"
-          className={CSS.element(baseClass, "arrow-fill")}
-        ></div>,
-      );
-    }
-    return result;
-  }
-
-  render(context: RenderingContext, instance: InstanceType, key: string) {
-    let { CSS, baseClass } = this;
-    //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
-    //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
-    let beacon = null;
-    if (this.relatedElement) instance.relatedElement = this.relatedElement;
-
-    if (!this.relatedElement || instance.needsBeacon) {
-      beacon = (
-        <div
-          key={`${key}-beacon`}
-          className={CSS.element(baseClass, "beacon")}
-          ref={(el) => {
-            if (instance.relatedElement || !el) return;
-            let target: HTMLElement | null = el;
-            if (this.onResolveRelatedElement)
-              target = instance.invoke("onResolveRelatedElement", el, instance);
-            else target = el.previousElementSibling as HTMLElement;
-            if (!target) target = el;
-            if (target == el) instance.needsBeacon = true;
-            instance.relatedElement = target;
-            instance.setState({ dummy: {} });
-          }}
-        />
-      );
-    }
-    return [
-      beacon,
-      instance.relatedElement && super.render(context, instance, key),
-    ];
-  }
-
-  getOverlayContainer(): HTMLElement {
-    // this should be instance.relatedElement
-    if (this.relatedElement) {
-      let container = closestParent(
-        this.relatedElement,
-        (el) => el.dataset && !!el.dataset.focusableOverlayContainer,
-      );
-      if (container) return container;
-    }
-    return super.getOverlayContainer();
-  }
-
-  getConfigureOverlayContainerContext(
-    instance?: DropdownInstance,
-  ): ConfigureOverlayContainerContext {
-    return {
-      ...super.getConfigureOverlayContainerContext(),
-      relatedElement: instance?.relatedElement ?? this.relatedElement,
-    };
-  }
+   }
+
+   applyPositioningPlacementStyles(
+      style: any,
+      placement: string,
+      contentSize: any,
+      parentBounds: any,
+      el: HTMLElement,
+      noAuto: boolean,
+      arrowAdjust: number = 0,
+   ): void {
+      switch (this.positioning) {
+         case "absolute":
+            this.applyAbsolutePositioningPlacementStyles(
+               style,
+               placement,
+               contentSize,
+               parentBounds,
+               el,
+               noAuto,
+               arrowAdjust,
+            );
+            break;
+
+         case "auto":
+            if (isTouchDevice())
+               this.applyAbsolutePositioningPlacementStyles(
+                  style,
+                  placement,
+                  contentSize,
+                  parentBounds,
+                  el,
+                  noAuto,
+                  arrowAdjust,
+               );
+            else
+               this.applyFixedPositioningPlacementStyles(
+                  style,
+                  placement,
+                  contentSize,
+                  parentBounds,
+                  el,
+                  noAuto,
+                  arrowAdjust,
+               );
+            break;
+
+         default:
+            this.applyFixedPositioningPlacementStyles(
+               style,
+               placement,
+               contentSize,
+               parentBounds,
+               el,
+               noAuto,
+               arrowAdjust,
+            );
+            break;
+      }
+   }
+
+   setDirectionClass(component: any, placement: string): void {
+      var state = {
+         "place-left": false,
+         "place-right": false,
+         "place-up": false,
+         "place-down": false,
+      };
+
+      component.lastPlacement = placement;
+
+      component.setCSSState({
+         ...state,
+         ["place-" + placement]: true,
+      });
+   }
+
+   measureNaturalDropdownSize(instance: InstanceType, component: any): any {
+      var { el } = component;
+      var size = {
+         width: el.offsetWidth,
+         height: this.constrain
+            ? calculateNaturalElementHeight(el)
+            : el.offsetHeight - el.clientHeight + el.scrollHeight,
+      };
+
+      if (this.firstChildDefinesHeight && el.firstChild) {
+         size.height = el.firstChild.offsetHeight;
+      }
+
+      if (this.firstChildDefinesWidth && el.firstChild) {
+         size.width = el.firstChild.offsetWidth;
+      }
+
+      if (this.onMeasureNaturalContentSize) {
+         var more = instance.invoke(
+            "onMeasureNaturalContentSize",
+            el,
+            instance,
+            component,
+         );
+         Object.assign(size, more);
+      }
+
+      return size;
+   }
+
+   findOptimalPlacement(
+      contentSize: any,
+      target: any,
+      placement: string,
+      lastPlacement: any,
+      el?: HTMLElement
+   ): any {
+      var placementOrder = this.placementOrder.split(" ");
+      var best = lastPlacement || placement;
+      var first;
+
+      var score: Record<string, number> = {};
+      var viewport = getViewportRect(0, el?.ownerDocument);
+
+      for (var i = 0; i < placementOrder.length; i++) {
+         var p = placementOrder[i];
+         if (!first) first = p;
+         var parts = p.split("-");
+
+         var primary = parts[0];
+         var secondary = parts[1] || "center";
+
+         score[p] = 0;
+         var vertical = true;
+
+         switch (primary) {
+            case "down":
+               score[p] +=
+                  3 *
+                  Math.min(
+                     1,
+                     (viewport.bottom - target.bottom - this.offset) /
+                     contentSize.height,
+                  );
+               break;
+
+            case "up":
+               score[p] +=
+                  3 *
+                  Math.min(
+                     1,
+                     (target.top - viewport.top - this.offset) / contentSize.height,
+                  );
+               break;
+
+            case "right":
+               score[p] +=
+                  target.right + contentSize.width + this.offset < viewport.right
+                     ? 3
+                     : 0;
+               vertical = false;
+               break;
+
+            case "left":
+               score[p] +=
+                  target.left - contentSize.width - this.offset >= viewport.left
+                     ? 3
+                     : 0;
+               vertical = false;
+               break;
+         }
+
+         switch (secondary) {
+            case "center":
+               if (vertical) {
+                  score[p] +=
+                     (target.right + target.left - contentSize.width) / 2 >=
+                        viewport.left
+                        ? 1
+                        : 0;
+                  score[p] +=
+                     (target.right + target.left + contentSize.width) / 2 <
+                        viewport.right
+                        ? 1
+                        : 0;
+               } else {
+                  score[p] +=
+                     (target.bottom + target.top - contentSize.height) / 2 >=
+                        viewport.top
+                        ? 1
+                        : 0;
+                  score[p] +=
+                     (target.bottom + target.top + contentSize.height) / 2 <
+                        viewport.bottom
+                        ? 1
+                        : 0;
+               }
+               break;
+
+            case "right":
+               score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
+               break;
+
+            case "left":
+               score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
+               break;
+
+            case "up":
+               score[p] +=
+                  target.bottom - contentSize.height >= viewport.top ? 2 : 0;
+               break;
+
+            case "down":
+               score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
+               break;
+         }
+      }
+
+      if (!(best in score)) best = first;
+
+      for (var k in score) if (score[k] > score[best]) best = k;
+
+      if (this.touchFriendly && isTouchDevice() && score[best] < 5)
+         return "screen-center";
+
+      return best;
+   }
+
+   handleKeyDown(e: React.KeyboardEvent, instance: InstanceType) {
+      switch (e.keyCode) {
+         case 27: //esc
+            var focusable = findFirst(instance.relatedElement!, isFocusable);
+            if (focusable) focusable.focus();
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+
+      if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
+   }
+
+   renderContents(context: RenderingContext, instance: InstanceType) {
+      let { CSS, baseClass } = this;
+      let result = [super.renderContents(context, instance)];
+      if (this.arrow) {
+         result.push(
+            <div
+               key="arrow-border"
+               className={CSS.element(baseClass, "arrow-border")}
+            ></div>,
+            <div
+               key="arrow-back"
+               className={CSS.element(baseClass, "arrow-fill")}
+            ></div>,
+         );
+      }
+      return result;
+   }
+
+   render(context: RenderingContext, instance: InstanceType, key: string) {
+      let { CSS, baseClass } = this;
+      //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
+      //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
+      let beacon = null;
+      if (this.relatedElement) instance.relatedElement = this.relatedElement;
+
+      if (!this.relatedElement || instance.needsBeacon) {
+         beacon = (
+            <div
+               key={`${key}-beacon`}
+               className={CSS.element(baseClass, "beacon")}
+               ref={(el) => {
+                  if (instance.relatedElement || !el) return;
+                  let target: HTMLElement | null = el;
+                  if (this.onResolveRelatedElement)
+                     target = instance.invoke("onResolveRelatedElement", el, instance);
+                  else target = el.previousElementSibling as HTMLElement;
+                  if (!target) target = el;
+                  if (target == el) instance.needsBeacon = true;
+                  instance.relatedElement = target;
+                  instance.setState({ dummy: {} });
+               }}
+            />
+         );
+      }
+      return [
+         beacon,
+         instance.relatedElement && super.render(context, instance, key),
+      ];
+   }
+
+   getOverlayContainer(): HTMLElement {
+      // this should be instance.relatedElement
+      if (this.relatedElement) {
+         let container = closestParent(
+            this.relatedElement,
+            (el) => el.dataset && !!el.dataset.focusableOverlayContainer,
+         );
+         if (container) return container;
+      }
+      return super.getOverlayContainer();
+   }
+
+   getConfigureOverlayContainerContext(
+      instance?: DropdownInstance,
+   ): ConfigureOverlayContainerContext {
+      return {
+         ...super.getConfigureOverlayContainerContext(),
+         relatedElement: instance?.relatedElement ?? this.relatedElement,
+      };
+   }
 }
 
 DropdownBase.prototype.offset = 0;
@@ -965,16 +976,16 @@ DropdownBase.prototype.firstChildDefinesHeight = false;
 DropdownBase.prototype.firstChildDefinesWidth = false;
 DropdownBase.prototype.cover = false;
 
-export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
+export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> { }
 
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
-function getViewportRect(padding = 0) {
-  return {
-    left: padding,
-    top: padding,
-    right: document.documentElement.offsetWidth - padding,
-    bottom: document.documentElement.offsetHeight - padding,
-  };
+function getViewportRect(padding = 0, doc: Document = document) {
+   return {
+      left: padding,
+      top: padding,
+      right: doc.documentElement.offsetWidth - padding,
+      bottom: doc.documentElement.offsetHeight - padding,
+   };
 }

From 039b568d98cde63f045f205f1d9ba6f2fa776117 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20Kova=C4=8Devi=C4=87?= <milan.kovacevic@codaxy.com>
Date: Fri, 4 Sep 2026 14:17:51 +0200
Subject: [PATCH 2/5] add missing doc param to getViewportRect

---
 packages/cx/src/widgets/overlay/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
index 086167b53..40a9c9b20 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.tsx
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -423,7 +423,7 @@ export class DropdownBase<
       arrowAdjust: number = 0,
    ): void {
       let doc = el.ownerDocument || document;
-      let viewport = getViewportRect(this.screenPadding);
+      let viewport = getViewportRect(this.screenPadding, doc);
       style.position = "fixed";
 
       if (placement.startsWith("down")) {

From 4416b4e66488c81133e93fd521640c7de8a2297d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20Kova=C4=8Devi=C4=87?= <milan.kovacevic@codaxy.com>
Date: Fri, 4 Sep 2026 14:53:38 +0200
Subject: [PATCH 3/5] fix(getActiveElement): handle optional document parameter
 and improve active element retrieval

---
 packages/cx/src/util/getActiveElement.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
index 5ae91d5b7..18546e091 100644
--- a/packages/cx/src/util/getActiveElement.ts
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -1,6 +1,7 @@
 //IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(doc: Document = document): Element {
-   let active = doc.activeElement ?? doc.body;
+export function getActiveElement(doc?: Document): Element {
+   if (!doc) doc = document;
+   let active = doc?.activeElement ?? doc?.body;
 
    //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
    //<iframe> element itself - drill into its own document to find the element that's

From 7def20d1b2301491c3c23f8c6253a3c40ec449fc Mon Sep 17 00:00:00 2001
From: Milan Kovacevic <milan.kovacevic@codaxy.com>
Date: Tue, 8 Sep 2026 14:41:10 +0200
Subject: [PATCH 4/5] Reformat edited files with existing formatting rules of
 the project

---
 litmus/features/dropdown/IFramePortal.js      |   78 +-
 .../dropdown/lookup-inside-iframe-portal.js   |  138 +-
 .../dropdown/lookup-inside-real-iframe.js     |   99 +-
 packages/cx/src/util/getActiveElement.ts      |   22 +-
 packages/cx/src/widgets/overlay/Dropdown.tsx  | 1792 +++++++++--------
 5 files changed, 1077 insertions(+), 1052 deletions(-)

diff --git a/litmus/features/dropdown/IFramePortal.js b/litmus/features/dropdown/IFramePortal.js
index 850e8c92c..d732c1c14 100644
--- a/litmus/features/dropdown/IFramePortal.js
+++ b/litmus/features/dropdown/IFramePortal.js
@@ -2,24 +2,24 @@ import { createPortal } from "react-dom";
 import { useEffect, useRef, useState } from "react";
 
 function copyStyles(sourceDoc, targetDoc) {
-   Array.from(sourceDoc.styleSheets).forEach((styleSheet) => {
-      try {
-         if (styleSheet.href) {
-            let link = targetDoc.createElement("link");
-            link.rel = "stylesheet";
-            link.href = styleSheet.href;
-            targetDoc.head.appendChild(link);
-         } else if (styleSheet.ownerNode && styleSheet.ownerNode.textContent) {
-            // dev builds inject theme/widget CSS as inline <style> tags (style-loader),
-            // which have no .href, so clone the tag's contents instead
-            let style = targetDoc.createElement("style");
-            style.textContent = styleSheet.ownerNode.textContent;
-            targetDoc.head.appendChild(style);
-         }
-      } catch (err) {
-         console.warn("IFramePortal: could not copy stylesheet", err);
+  Array.from(sourceDoc.styleSheets).forEach((styleSheet) => {
+    try {
+      if (styleSheet.href) {
+        let link = targetDoc.createElement("link");
+        link.rel = "stylesheet";
+        link.href = styleSheet.href;
+        targetDoc.head.appendChild(link);
+      } else if (styleSheet.ownerNode && styleSheet.ownerNode.textContent) {
+        // dev builds inject theme/widget CSS as inline <style> tags (style-loader),
+        // which have no .href, so clone the tag's contents instead
+        let style = targetDoc.createElement("style");
+        style.textContent = styleSheet.ownerNode.textContent;
+        targetDoc.head.appendChild(style);
       }
-   });
+    } catch (err) {
+      console.warn("IFramePortal: could not copy stylesheet", err);
+    }
+  });
 }
 
 // Renders `children` inside a same-origin iframe via a React portal, while the
@@ -27,31 +27,31 @@ function copyStyles(sourceDoc, targetDoc) {
 // Single React tree, single JS realm - only the DOM output is split across two
 // documents. This mirrors iframe-based style isolation helpers (e.g. react-frame-component).
 export const IFramePortal = ({ children, style }) => {
-   let iframeRef = useRef(null);
-   let [containerEl, setContainerEl] = useState(null);
+  let iframeRef = useRef(null);
+  let [containerEl, setContainerEl] = useState(null);
 
-   useEffect(() => {
-      let iframeEl = iframeRef.current;
+  useEffect(() => {
+    let iframeEl = iframeRef.current;
 
-      function handleLoad() {
-         let doc = iframeEl.contentDocument;
-         doc.body.style.margin = "0";
-         let container = doc.createElement("div");
-         doc.body.appendChild(container);
-         copyStyles(document, doc);
-         setContainerEl(container);
-      }
+    function handleLoad() {
+      let doc = iframeEl.contentDocument;
+      doc.body.style.margin = "0";
+      let container = doc.createElement("div");
+      doc.body.appendChild(container);
+      copyStyles(document, doc);
+      setContainerEl(container);
+    }
 
-      if (iframeEl.contentDocument.readyState === "complete") handleLoad();
-      else iframeEl.addEventListener("load", handleLoad);
+    if (iframeEl.contentDocument.readyState === "complete") handleLoad();
+    else iframeEl.addEventListener("load", handleLoad);
 
-      return () => iframeEl.removeEventListener("load", handleLoad);
-   }, []);
+    return () => iframeEl.removeEventListener("load", handleLoad);
+  }, []);
 
-   return (
-      <div>
-         <iframe ref={iframeRef} style={style} />
-         {containerEl && createPortal(children, containerEl)}
-      </div>
-   );
+  return (
+    <div>
+      <iframe ref={iframeRef} style={style} />
+      {containerEl && createPortal(children, containerEl)}
+    </div>
+  );
 };
diff --git a/litmus/features/dropdown/lookup-inside-iframe-portal.js b/litmus/features/dropdown/lookup-inside-iframe-portal.js
index 36601da1a..232aca036 100644
--- a/litmus/features/dropdown/lookup-inside-iframe-portal.js
+++ b/litmus/features/dropdown/lookup-inside-iframe-portal.js
@@ -11,72 +11,86 @@ import "./style.scss";
 // left/top offset within the parent document.
 
 class PageController extends Controller {
-   onInit() {
-      this.store.init("city", 1);
-      this.store.init("cities", [
-         { id: 1, text: "New York" },
-         { id: 2, text: "London" },
-         { id: 3, text: "Paris" },
-         { id: 4, text: "Berlin" },
-         { id: 5, text: "Tokyo" },
-         { id: 6, text: "Sydney" },
-         { id: 7, text: "Toronto" },
-         { id: 8, text: "Madrid" },
-      ]);
-   }
+  onInit() {
+    this.store.init("city", 1);
+    this.store.init("cities", [
+      { id: 1, text: "New York" },
+      { id: 2, text: "London" },
+      { id: 3, text: "Paris" },
+      { id: 4, text: "Berlin" },
+      { id: 5, text: "Tokyo" },
+      { id: 6, text: "Sydney" },
+      { id: 7, text: "Toronto" },
+      { id: 8, text: "Madrid" },
+    ]);
+  }
 }
 
 export default (
-   <cx>
-      <div style="font-family: sans-serif; display: flex; flexDirection: column;" controller={PageController}>
-         <p style="max-width: 420px; margin: 0 0 16px;">
-            Bug repro: The LookupField below is portaled inside an iframe that is offset from the top-left corner of the
-            parent document. Open the dropdown — it should appear directly above or below the field, but instead it is
-            positioned incorrectly elsewhere on the page.
-         </p>
-         <p style="max-width: 420px; margin: 0 0 16px;">
-            Setting inline=false on the inner lookup would fix the dropdown positioning, but it would prevent the
-            dropdown from being isolated from the parent document's stylesheets. Isolating the stylesheets is the
-            purpose of IFramePortal, so this is not a suitable workaround.
-         </p>
+  <cx>
+    <div
+      style="font-family: sans-serif; display: flex; flexDirection: column;"
+      controller={PageController}
+    >
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Bug repro: The LookupField below is portaled inside an iframe that is
+        offset from the top-left corner of the parent document. Open the
+        dropdown — it should appear directly above or below the field, but
+        instead it is positioned incorrectly elsewhere on the page.
+      </p>
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Setting inline=false on the inner lookup would fix the dropdown
+        positioning, but it would prevent the dropdown from being isolated from
+        the parent document's stylesheets. Isolating the stylesheets is the
+        purpose of IFramePortal, so this is not a suitable workaround.
+      </p>
 
-         <p style="max-width: 420px; margin: 0 0 16px;">
-            The parent document's lookup has a red background, so the inline-rendered lookup inside IFramePortal will
-            pick up this style, while the other lookup will not. Since IFramePortal does not allow stylesheets from the
-            outer document to leak into the iframe, we achieve the desired style isolation on the other lookup.
-         </p>
-         <LabelsTopLayout>
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        The parent document's lookup has a red background, so the
+        inline-rendered lookup inside IFramePortal will pick up this style,
+        while the other lookup will not. Since IFramePortal does not allow
+        stylesheets from the outer document to leak into the iframe, we achieve
+        the desired style isolation on the other lookup.
+      </p>
+      <LabelsTopLayout>
+        <LookupField
+          label="Parent Document Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
+
+      <IFramePortal
+        style={{
+          width: "1000px",
+          height: "600px",
+          marginLeft: "300px",
+          border: "2px solid #c0392b",
+        }}
+      >
+        <div style="padding: 40px;">
+          <LabelsTopLayout>
             <LookupField
-               label="Parent Document Lookup"
-               value-bind="city"
-               options-bind="cities"
-               placeholder="Select a city..."
+              class="inner-lookup"
+              label="IFrame Portal Lookup (inline)"
+              value-bind="city"
+              options-bind="cities"
+              placeholder="Select a city..."
+              dropdownOptions={{
+                inline: false,
+              }}
             />
-         </LabelsTopLayout>
-
-         <IFramePortal style={{ width: "1000px", height: "600px", marginLeft: "300px", border: "2px solid #c0392b" }}>
-            <div style="padding: 40px;">
-               <LabelsTopLayout>
-                  <LookupField
-                     class="inner-lookup"
-                     label="IFrame Portal Lookup (inline)"
-                     value-bind="city"
-                     options-bind="cities"
-                     placeholder="Select a city..."
-                     dropdownOptions={{
-                        inline: false,
-                     }}
-                  />
-                  <LookupField
-                     class="inner-lookup"
-                     label="IFrame Portal Lookup"
-                     value-bind="city"
-                     options-bind="cities"
-                     placeholder="Select a city..."
-                  />
-               </LabelsTopLayout>
-            </div>
-         </IFramePortal>
-      </div>
-   </cx>
+            <LookupField
+              class="inner-lookup"
+              label="IFrame Portal Lookup"
+              value-bind="city"
+              options-bind="cities"
+              placeholder="Select a city..."
+            />
+          </LabelsTopLayout>
+        </div>
+      </IFramePortal>
+    </div>
+  </cx>
 );
diff --git a/litmus/features/dropdown/lookup-inside-real-iframe.js b/litmus/features/dropdown/lookup-inside-real-iframe.js
index 0b1683c60..38c1cf4ca 100644
--- a/litmus/features/dropdown/lookup-inside-real-iframe.js
+++ b/litmus/features/dropdown/lookup-inside-real-iframe.js
@@ -4,59 +4,66 @@ import { LookupField } from "cx/widgets";
 const isEmbedded = window.self !== window.top;
 
 class PageController extends Controller {
-   onInit() {
-      this.store.init("city", 1);
-      this.store.init("cities", [
-         { id: 1, text: "New York" },
-         { id: 2, text: "London" },
-         { id: 3, text: "Paris" },
-         { id: 4, text: "Berlin" },
-         { id: 5, text: "Tokyo" },
-         { id: 6, text: "Sydney" },
-         { id: 7, text: "Toronto" },
-         { id: 8, text: "Madrid" },
-      ]);
-   }
+  onInit() {
+    this.store.init("city", 1);
+    this.store.init("cities", [
+      { id: 1, text: "New York" },
+      { id: 2, text: "London" },
+      { id: 3, text: "Paris" },
+      { id: 4, text: "Berlin" },
+      { id: 5, text: "Tokyo" },
+      { id: 6, text: "Sydney" },
+      { id: 7, text: "Toronto" },
+      { id: 8, text: "Madrid" },
+    ]);
+  }
 }
 
 const LookupInFrame = (
-   <cx>
-      <div style="padding: 40px; font-family: sans-serif;" controller={PageController}>
-         <LabelsTopLayout>
-            <LookupField
-               label="Real IFrame Lookup"
-               value-bind="city"
-               options-bind="cities"
-               placeholder="Select a city..."
-            />
-         </LabelsTopLayout>
-      </div>
-   </cx>
+  <cx>
+    <div
+      style="padding: 40px; font-family: sans-serif;"
+      controller={PageController}
+    >
+      <LabelsTopLayout>
+        <LookupField
+          label="Real IFrame Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
+    </div>
+  </cx>
 );
 
 const HostPage = (
-   <cx>
-      <div style="font-family: sans-serif; display: flex; flexDirection: column;" controller={PageController}>
-         <p style="max-width: 420px; margin: 0 0 16px;">
-            Bug repro (real iframe): the LookupField in the framed page below runs as a fully independent app in its own
-            iframe document/window (a genuine navigation via iframe src, not a React portal). Open its dropdown and
-            check whether it's positioned correctly relative to the field.
-         </p>
-         <LabelsTopLayout>
-            <LookupField
-               label="Parent Document Lookup"
-               value-bind="city"
-               options-bind="cities"
-               placeholder="Select a city..."
-            />
-         </LabelsTopLayout>
+  <cx>
+    <div
+      style="font-family: sans-serif; display: flex; flexDirection: column;"
+      controller={PageController}
+    >
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Bug repro (real iframe): the LookupField in the framed page below runs
+        as a fully independent app in its own iframe document/window (a genuine
+        navigation via iframe src, not a React portal). Open its dropdown and
+        check whether it's positioned correctly relative to the field.
+      </p>
+      <LabelsTopLayout>
+        <LookupField
+          label="Parent Document Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
 
-         <iframe
-            src={window.location.href}
-            style="width: 1000px; height: 600px; margin-left: 300px; border: 2px solid #2980b9;"
-         />
-      </div>
-   </cx>
+      <iframe
+        src={window.location.href}
+        style="width: 1000px; height: 600px; margin-left: 300px; border: 2px solid #2980b9;"
+      />
+    </div>
+  </cx>
 );
 
 export default isEmbedded ? LookupInFrame : HostPage;
diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
index 18546e091..e9d21b8d1 100644
--- a/packages/cx/src/util/getActiveElement.ts
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -1,16 +1,16 @@
 //IE sometimes returns null while other browsers always return document.body.
 export function getActiveElement(doc?: Document): Element {
-   if (!doc) doc = document;
-   let active = doc?.activeElement ?? doc?.body;
+  if (!doc) doc = document;
+  let active = doc?.activeElement ?? doc?.body;
 
-   //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
-   //<iframe> element itself - drill into its own document to find the element that's
-   //actually focused there (recursively, in case of nested iframes)
-   if (active && active.tagName === "IFRAME") {
-      const iframe = active as HTMLIFrameElement;
-      let frameDoc = iframe.contentDocument;
-      if (frameDoc) return getActiveElement(frameDoc);
-   }
+  //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
+  //<iframe> element itself - drill into its own document to find the element that's
+  //actually focused there (recursively, in case of nested iframes)
+  if (active && active.tagName === "IFRAME") {
+    const iframe = active as HTMLIFrameElement;
+    let frameDoc = iframe.contentDocument;
+    if (frameDoc) return getActiveElement(frameDoc);
+  }
 
-   return active;
+  return active;
 }
diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
index 40a9c9b20..0dbdb0d00 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.tsx
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -7,11 +7,11 @@ import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import {
-   ConfigureOverlayContainerContext,
-   Overlay,
-   OverlayBase,
-   OverlayConfig,
-   OverlayInstance,
+  ConfigureOverlayContainerContext,
+  Overlay,
+  OverlayBase,
+  OverlayConfig,
+  OverlayInstance,
 } from "./Overlay";
 import { Instance } from "../../ui/Instance";
 import { StringProp } from "../../ui/Prop";
@@ -25,936 +25,940 @@ import { HtmlElement } from "../HtmlElement";
  */
 
 export interface DropdownConfig extends OverlayConfig {
-   /** Placement option for the dropdown relative to the trigger element. */
-   placement?: StringProp | null;
+  /** Placement option for the dropdown relative to the trigger element. */
+  placement?: StringProp | null;
 
-   /** Offset distance from the trigger element. */
-   offset?: number;
+  /** Offset distance from the trigger element. */
+  offset?: number;
 
-   /** Match the dropdown width to the trigger element. */
-   matchWidth?: boolean;
+  /** Match the dropdown width to the trigger element. */
+  matchWidth?: boolean;
 
-   /** Match the dropdown max-width to the trigger element. */
-   matchMaxWidth?: boolean;
+  /** Match the dropdown max-width to the trigger element. */
+  matchMaxWidth?: boolean;
 
-   /** Placement preference order. */
-   placementOrder?: string;
+  /** Placement preference order. */
+  placementOrder?: string;
 
-   /** Constrain the dropdown within the viewport. */
-   constrain?: boolean;
+  /** Constrain the dropdown within the viewport. */
+  constrain?: boolean;
 
-   /** Positioning strategy - "fixed", "absolute", or "auto". */
-   positioning?: string;
+  /** Positioning strategy - "fixed", "absolute", or "auto". */
+  positioning?: string;
 
-   /** Use touch-friendly positioning on touch devices. */
-   touchFriendly?: boolean;
+  /** Use touch-friendly positioning on touch devices. */
+  touchFriendly?: boolean;
 
-   /** Show an arrow pointing to the trigger element. */
-   arrow?: boolean;
+  /** Show an arrow pointing to the trigger element. */
+  arrow?: boolean;
 
-   /** Shift the dropdown so the arrow tip lines up with the target point (e.g. the mouse cursor for context menus). Only applies when `arrow` is also set. */
-   alignArrow?: boolean;
+  /** Shift the dropdown so the arrow tip lines up with the target point (e.g. the mouse cursor for context menus). Only applies when `arrow` is also set. */
+  alignArrow?: boolean;
 
-   /** Distance of the arrow tip from the dropdown's edge, in pixels. Override for the theme's default. */
-   arrowOffset?: number;
+  /** Distance of the arrow tip from the dropdown's edge, in pixels. Override for the theme's default. */
+  arrowOffset?: number;
 
-   /** Add padding around the dropdown. */
-   pad?: boolean;
+  /** Add padding around the dropdown. */
+  pad?: boolean;
 
-   /** Element explosion distance for positioning. */
-   elementExplode?: number;
+  /** Element explosion distance for positioning. */
+  elementExplode?: number;
 
-   /** Padding from screen edges. */
-   screenPadding?: number;
+  /** Padding from screen edges. */
+  screenPadding?: number;
 
-   /** First child element defines the height. */
-   firstChildDefinesHeight?: boolean;
+  /** First child element defines the height. */
+  firstChildDefinesHeight?: boolean;
 
-   /** First child element defines the width. */
-   firstChildDefinesWidth?: boolean;
+  /** First child element defines the width. */
+  firstChildDefinesWidth?: boolean;
 
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
-   closeOnScrollDistance?: number;
+  /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
+  closeOnScrollDistance?: number;
 
-   /** The element to position the dropdown relative to. */
-   relatedElement?: Element;
+  /** The element to position the dropdown relative to. */
+  relatedElement?: Element;
 
-   /** Callback to resolve the related element. */
-   onResolveRelatedElement?:
-   | string
-   | ((beaconEl: Element, instance: any) => Element);
+  /** Callback to resolve the related element. */
+  onResolveRelatedElement?:
+    | string
+    | ((beaconEl: Element, instance: any) => Element);
 
-   /** Callback to measure natural content size. */
-   onMeasureNaturalContentSize?:
-   | string
-   | ((el: Element, instance: any) => { width?: number; height?: number });
+  /** Callback to measure natural content size. */
+  onMeasureNaturalContentSize?:
+    | string
+    | ((el: Element, instance: any) => { width?: number; height?: number });
 
-   /** Callback when dropdown mounts. */
-   onDropdownDidMount?: string;
+  /** Callback when dropdown mounts. */
+  onDropdownDidMount?: string;
 
-   /** Callback to validate dropdown position. */
-   pipeValidateDropdownPosition?: string;
+  /** Callback to validate dropdown position. */
+  pipeValidateDropdownPosition?: string;
 
-   /** Callback when dropdown is dismissed after scroll. */
-   onDismissAfterScroll?: string;
+  /** Callback when dropdown is dismissed after scroll. */
+  onDismissAfterScroll?: string;
 
-   /** Track mouse position for dropdowns. */
-   trackMouse?: boolean;
+  /** Track mouse position for dropdowns. */
+  trackMouse?: boolean;
 
-   /** Track mouse X position. */
-   trackMouseX?: boolean;
+  /** Track mouse X position. */
+  trackMouseX?: boolean;
 
-   /** Track mouse Y position. */
-   trackMouseY?: boolean;
+  /** Track mouse Y position. */
+  trackMouseY?: boolean;
 
-   /** Cover the related element with dropdown. */
-   cover?: boolean;
+  /** Cover the related element with dropdown. */
+  cover?: boolean;
 }
 
 export class DropdownInstance<
-   WidgetType extends DropdownBase<any, any> = Dropdown,
+  WidgetType extends DropdownBase<any, any> = Dropdown,
 > extends OverlayInstance<WidgetType> {
-   mousePosition?: any;
-   parentPositionChangeEvent?: any;
-   initialScreenPosition?: any;
-   relatedElement?: HTMLElement;
-   needsBeacon?: boolean;
+  mousePosition?: any;
+  parentPositionChangeEvent?: any;
+  initialScreenPosition?: any;
+  relatedElement?: HTMLElement;
+  needsBeacon?: boolean;
 }
 
 export class DropdownBase<
-   Config extends DropdownConfig = DropdownConfig,
-   InstanceType extends DropdownInstance<any> = DropdownInstance<any>,
+  Config extends DropdownConfig = DropdownConfig,
+  InstanceType extends DropdownInstance<any> = DropdownInstance<any>,
 > extends OverlayBase<Config, InstanceType> {
-   declare trackMouse?: boolean;
-   declare trackMouseX?: boolean;
-   declare trackMouseY?: boolean;
-   declare offset: number;
-   declare matchWidth?: boolean;
-   declare matchMaxWidth?: boolean;
-   declare placementOrder: string;
-   declare placement?: StringProp | null;
-   declare constrain?: boolean;
-   declare positioning?: string;
-   declare touchFriendly?: boolean;
-   declare arrow?: boolean;
-   declare alignArrow?: boolean;
-   declare arrowOffset?: number;
-   declare elementExplode?: number;
-   declare screenPadding: number;
-   declare firstChildDefinesHeight?: boolean;
-   declare firstChildDefinesWidth?: boolean;
-   declare closeOnScrollDistance: number;
-   declare relatedElement?: HTMLElement;
-   declare onResolveRelatedElement?:
-      | string
-      | ((beaconEl: Element, instance: any) => Element);
-   declare onMeasureNaturalContentSize?:
-      | string
-      | ((el: Element, instance: any) => { width?: number; height?: number });
-   declare onDropdownDidMount?: string;
-   declare pipeValidateDropdownPosition?: string;
-   declare onDismissAfterScroll?: string;
-   declare onKeyDown?: string;
-   declare cover?: boolean;
-   declare mousePosition?: any;
-   declare mouseTrap?: boolean;
-   declare createDelay?: number;
-
-   init() {
-      if (this.trackMouse) {
-         this.trackMouseX = true;
-         this.trackMouseY = true;
-      }
-      if (this.autoFocus && !this.hasOwnProperty("focusable"))
-         this.focusable = true;
-      super.init();
-   }
-
-   declareData(...args: any[]) {
-      return super.declareData(...args, {
-         placement: undefined,
-      });
-   }
-
-   initInstance(context: RenderingContext, instance: InstanceType): void {
-      instance.mousePosition = this.mousePosition;
-      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
-      super.initInstance(context, instance);
-   }
-
-   prepareData(context: RenderingContext, instance: InstanceType): void {
-      super.prepareData(context, instance);
-      if (this.arrowOffset != null) {
-         instance.data.style = {
-            ...instance.data.style,
-            "--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
-         };
-      }
-   }
-
-   explore(context: RenderingContext, instance: InstanceType): void {
-      context.push("lastDropdown", instance);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: InstanceType): void {
-      context.pop("lastDropdown");
-      super.exploreCleanup(context, instance);
-   }
-
-   overlayDidMount(instance: InstanceType, component: any): void {
-      super.overlayDidMount(instance, component);
-      var scrollableParents: Element[] = (component.scrollableParents = [
-         window as any,
-      ]);
-      component.updateDropdownPosition = (e: any) =>
-         this.updateDropdownPosition(instance, component);
-
-      instance.initialScreenPosition = null;
-
-      var el = instance.relatedElement?.parentElement;
-      while (el) {
-         scrollableParents.push(el);
-         el = el.parentElement;
-      }
-      scrollableParents.forEach((el: any) => {
-         el.addEventListener("scroll", component.updateDropdownPosition);
-      });
-      component.offResize = ResizeManager.subscribe(
-         component.updateDropdownPosition,
-      );
-
-      if (this.onDropdownDidMount)
-         instance.invoke("onDropdownDidMount", instance, component);
-
-      if (this.pipeValidateDropdownPosition)
-         instance.invoke(
-            "pipeValidateDropdownPosition",
-            component.updateDropdownPosition,
-            instance,
-         );
-
-      if (instance.parentPositionChangeEvent)
-         component.offParentPositionChange =
-            instance.parentPositionChangeEvent.subscribe(
-               component.updateDropdownPosition,
-            );
-   }
-
-   overlayDidUpdate(instance: InstanceType, component: any): void {
+  declare trackMouse?: boolean;
+  declare trackMouseX?: boolean;
+  declare trackMouseY?: boolean;
+  declare offset: number;
+  declare matchWidth?: boolean;
+  declare matchMaxWidth?: boolean;
+  declare placementOrder: string;
+  declare placement?: StringProp | null;
+  declare constrain?: boolean;
+  declare positioning?: string;
+  declare touchFriendly?: boolean;
+  declare arrow?: boolean;
+  declare alignArrow?: boolean;
+  declare arrowOffset?: number;
+  declare elementExplode?: number;
+  declare screenPadding: number;
+  declare firstChildDefinesHeight?: boolean;
+  declare firstChildDefinesWidth?: boolean;
+  declare closeOnScrollDistance: number;
+  declare relatedElement?: HTMLElement;
+  declare onResolveRelatedElement?:
+    | string
+    | ((beaconEl: Element, instance: any) => Element);
+  declare onMeasureNaturalContentSize?:
+    | string
+    | ((el: Element, instance: any) => { width?: number; height?: number });
+  declare onDropdownDidMount?: string;
+  declare pipeValidateDropdownPosition?: string;
+  declare onDismissAfterScroll?: string;
+  declare onKeyDown?: string;
+  declare cover?: boolean;
+  declare mousePosition?: any;
+  declare mouseTrap?: boolean;
+  declare createDelay?: number;
+
+  init() {
+    if (this.trackMouse) {
+      this.trackMouseX = true;
+      this.trackMouseY = true;
+    }
+    if (this.autoFocus && !this.hasOwnProperty("focusable"))
+      this.focusable = true;
+    super.init();
+  }
+
+  declareData(...args: any[]) {
+    return super.declareData(...args, {
+      placement: undefined,
+    });
+  }
+
+  initInstance(context: RenderingContext, instance: InstanceType): void {
+    instance.mousePosition = this.mousePosition;
+    instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+    super.initInstance(context, instance);
+  }
+
+  prepareData(context: RenderingContext, instance: InstanceType): void {
+    super.prepareData(context, instance);
+    if (this.arrowOffset != null) {
+      instance.data.style = {
+        ...instance.data.style,
+        "--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
+      };
+    }
+  }
+
+  explore(context: RenderingContext, instance: InstanceType): void {
+    context.push("lastDropdown", instance);
+    super.explore(context, instance);
+  }
+
+  exploreCleanup(context: RenderingContext, instance: InstanceType): void {
+    context.pop("lastDropdown");
+    super.exploreCleanup(context, instance);
+  }
+
+  overlayDidMount(instance: InstanceType, component: any): void {
+    super.overlayDidMount(instance, component);
+    var scrollableParents: Element[] = (component.scrollableParents = [
+      window as any,
+    ]);
+    component.updateDropdownPosition = (e: any) =>
       this.updateDropdownPosition(instance, component);
-   }
-
-   overlayWillUnmount(instance: InstanceType, component: any): void {
-      var { scrollableParents } = component;
-      if (scrollableParents) {
-         scrollableParents.forEach((el: Element) => {
-            el.removeEventListener("scroll", component.updateDropdownPosition);
-         });
-         delete component.scrollableParents;
-         delete component.updateDropdownPosition;
-      }
-      if (component.offResize) component.offResize();
 
-      if (this.pipeValidateDropdownPosition)
-         instance.invoke("pipeValidateDropdownPosition", null, instance);
-
-      if (component.offParentPositionChange) component.offParentPositionChange();
-
-      delete component.parentBounds;
-      delete component.initialScreenPosition;
-   }
+    instance.initialScreenPosition = null;
+
+    var el = instance.relatedElement?.parentElement;
+    while (el) {
+      scrollableParents.push(el);
+      el = el.parentElement;
+    }
+    scrollableParents.forEach((el: any) => {
+      el.addEventListener("scroll", component.updateDropdownPosition);
+    });
+    component.offResize = ResizeManager.subscribe(
+      component.updateDropdownPosition,
+    );
+
+    if (this.onDropdownDidMount)
+      instance.invoke("onDropdownDidMount", instance, component);
+
+    if (this.pipeValidateDropdownPosition)
+      instance.invoke(
+        "pipeValidateDropdownPosition",
+        component.updateDropdownPosition,
+        instance,
+      );
 
-   dismissAfterScroll(data: any, instance: InstanceType, component: any): void {
-      if (
-         this.onDismissAfterScroll &&
-         instance.invoke("onDismissAfterScroll", data, instance, component) ===
-         false
-      )
-         return;
-      if (instance.dismiss) instance.dismiss();
-   }
-
-   updateDropdownPosition(instance: InstanceType, component: any): void {
-      var { el, initialScreenPosition } = component;
-      var { data, relatedElement } = instance;
-
-      //if the dropdown renders in the same document as its related element (e.g. not
-      //portaled to the top-level body, such as an inline dropdown living inside an
-      //iframe together with its field), no cross-document offset should be applied -
-      //getBoundingClientRect() is already relative to that shared document/viewport.
-      var isSameDocument = el && relatedElement && el.ownerDocument === relatedElement.ownerDocument;
-      var parentBounds = isSameDocument
-         ? relatedElement!.getBoundingClientRect()
-         : getTopLevelBoundingClientRect(relatedElement!);
-
-      //getBoundingClientRect() will return an empty rect if the element is hidden or removed
+    if (instance.parentPositionChangeEvent)
+      component.offParentPositionChange =
+        instance.parentPositionChangeEvent.subscribe(
+          component.updateDropdownPosition,
+        );
+  }
+
+  overlayDidUpdate(instance: InstanceType, component: any): void {
+    this.updateDropdownPosition(instance, component);
+  }
+
+  overlayWillUnmount(instance: InstanceType, component: any): void {
+    var { scrollableParents } = component;
+    if (scrollableParents) {
+      scrollableParents.forEach((el: Element) => {
+        el.removeEventListener("scroll", component.updateDropdownPosition);
+      });
+      delete component.scrollableParents;
+      delete component.updateDropdownPosition;
+    }
+    if (component.offResize) component.offResize();
+
+    if (this.pipeValidateDropdownPosition)
+      instance.invoke("pipeValidateDropdownPosition", null, instance);
+
+    if (component.offParentPositionChange) component.offParentPositionChange();
+
+    delete component.parentBounds;
+    delete component.initialScreenPosition;
+  }
+
+  dismissAfterScroll(data: any, instance: InstanceType, component: any): void {
+    if (
+      this.onDismissAfterScroll &&
+      instance.invoke("onDismissAfterScroll", data, instance, component) ===
+        false
+    )
+      return;
+    if (instance.dismiss) instance.dismiss();
+  }
+
+  updateDropdownPosition(instance: InstanceType, component: any): void {
+    var { el, initialScreenPosition } = component;
+    var { data, relatedElement } = instance;
+
+    //if the dropdown renders in the same document as its related element (e.g. not
+    //portaled to the top-level body, such as an inline dropdown living inside an
+    //iframe together with its field), no cross-document offset should be applied -
+    //getBoundingClientRect() is already relative to that shared document/viewport.
+    var isSameDocument =
+      el && relatedElement && el.ownerDocument === relatedElement.ownerDocument;
+    var parentBounds = isSameDocument
+      ? relatedElement!.getBoundingClientRect()
+      : getTopLevelBoundingClientRect(relatedElement!);
+
+    //getBoundingClientRect() will return an empty rect if the element is hidden or removed
+    if (
+      parentBounds.left == 0 &&
+      parentBounds.top == 0 &&
+      parentBounds.bottom == 0 &&
+      parentBounds.right == 0
+    ) {
+      if (!component.parentBounds) return;
+      parentBounds = component.parentBounds;
+    } else component.parentBounds = parentBounds;
+
+    if (this.trackMouseX && instance.mousePosition) {
+      parentBounds = new DOMRect(
+        instance.mousePosition.x,
+        parentBounds.top,
+        0,
+        parentBounds.bottom - parentBounds.top,
+      );
+    }
+
+    if (this.trackMouseY && instance.mousePosition) {
+      parentBounds = new DOMRect(
+        parentBounds.left,
+        instance.mousePosition.y,
+        parentBounds.right - parentBounds.left,
+        0,
+      );
+    }
+
+    let explode =
+      this.pad && typeof this.elementExplode === "number"
+        ? this.elementExplode
+        : 0;
+    if (explode) {
+      parentBounds = new DOMRect(
+        Math.round(parentBounds.left - explode),
+        Math.round(parentBounds.top - explode),
+        Math.round(parentBounds.right - parentBounds.left + 2 * explode),
+        Math.round(parentBounds.bottom - parentBounds.top + 2 * explode),
+      );
+    }
+
+    var style: any = {};
+    if (this.matchWidth)
+      style.minWidth = `${parentBounds.right - parentBounds.left}px`;
+    if (this.matchMaxWidth)
+      style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
+
+    var contentSize = this.measureNaturalDropdownSize(instance, component);
+    var placement = this.findOptimalPlacement(
+      contentSize,
+      parentBounds,
+      data.placement,
+      component.lastPlacement,
+      el,
+    );
+
+    var arrowAdjust = this.getArrowAdjust(component);
+
+    this.applyPositioningPlacementStyles(
+      style,
+      placement,
+      contentSize,
+      parentBounds,
+      el,
+      false,
+      arrowAdjust,
+    );
+    component.setCustomStyle(style);
+    this.setDirectionClass(component, placement);
+
+    if (this.constrain) {
+      //recheck content size for changes as sometimes when auto is used the size can change
+      let newContentSize = this.measureNaturalDropdownSize(instance, component);
       if (
-         parentBounds.left == 0 &&
-         parentBounds.top == 0 &&
-         parentBounds.bottom == 0 &&
-         parentBounds.right == 0
+        newContentSize.width != contentSize.width ||
+        newContentSize.height != contentSize.height
       ) {
-         if (!component.parentBounds) return;
-         parentBounds = component.parentBounds;
-      } else component.parentBounds = parentBounds;
-
-      if (this.trackMouseX && instance.mousePosition) {
-         parentBounds = new DOMRect(
-            instance.mousePosition.x,
-            parentBounds.top,
-            0,
-            parentBounds.bottom - parentBounds.top,
-         );
+        let newStyle = {};
+        this.applyPositioningPlacementStyles(
+          newStyle,
+          placement,
+          newContentSize,
+          parentBounds,
+          el,
+          true,
+          arrowAdjust,
+        );
+        component.setCustomStyle(newStyle);
       }
-
-      if (this.trackMouseY && instance.mousePosition) {
-         parentBounds = new DOMRect(
-            parentBounds.left,
-            instance.mousePosition.y,
-            parentBounds.right - parentBounds.left,
-            0,
-         );
-      }
-
-      let explode =
-         this.pad && typeof this.elementExplode === "number"
-            ? this.elementExplode
-            : 0;
-      if (explode) {
-         parentBounds = new DOMRect(
-            Math.round(parentBounds.left - explode),
-            Math.round(parentBounds.top - explode),
-            Math.round(parentBounds.right - parentBounds.left + 2 * explode),
-            Math.round(parentBounds.bottom - parentBounds.top + 2 * explode),
-         );
-      }
-
-      var style: any = {};
-      if (this.matchWidth)
-         style.minWidth = `${parentBounds.right - parentBounds.left}px`;
-      if (this.matchMaxWidth)
-         style.maxWidth = `${parentBounds.right - parentBounds.left}px`;
-
-      var contentSize = this.measureNaturalDropdownSize(instance, component);
-      var placement = this.findOptimalPlacement(
-         contentSize,
-         parentBounds,
-         data.placement,
-         component.lastPlacement,
-         el
+    }
+
+    if (!initialScreenPosition)
+      initialScreenPosition = component.initialScreenPosition = parentBounds;
+
+    if (
+      (!this.trackMouseY &&
+        Math.abs(parentBounds.top - initialScreenPosition.top) >
+          this.closeOnScrollDistance) ||
+      (!this.trackMouseX &&
+        Math.abs(parentBounds.left - initialScreenPosition.left) >
+          this.closeOnScrollDistance)
+    )
+      this.dismissAfterScroll(
+        { parentBounds, initialScreenPosition },
+        instance,
+        component,
       );
 
-      var arrowAdjust = this.getArrowAdjust(component);
-
-      this.applyPositioningPlacementStyles(
-         style,
-         placement,
-         contentSize,
-         parentBounds,
-         el,
-         false,
-         arrowAdjust,
+    instance.positionChangeSubscribers.notify();
+  }
+
+  getArrowAdjust(component: any): number {
+    if (!this.alignArrow || !this.arrow) return 0;
+    if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
+    if (!component.el) return 0;
+    let raw = getComputedStyle(component.el)
+      .getPropertyValue("--cx-scss-dropdown-arrow-offset")
+      .trim();
+    let parsed = parseFloat(raw);
+    if (!isFinite(parsed)) return 0;
+    component.cachedArrowOffset = parsed;
+    return parsed;
+  }
+
+  applyFixedPositioningPlacementStyles(
+    style: any,
+    placement: string,
+    contentSize: any,
+    rel: any,
+    el: HTMLElement,
+    noAuto: boolean,
+    arrowAdjust: number = 0,
+  ): void {
+    let doc = el.ownerDocument || document;
+    let viewport = getViewportRect(this.screenPadding, doc);
+    style.position = "fixed";
+
+    if (placement.startsWith("down")) {
+      style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
+      let bottom =
+        viewport.bottom - (rel.bottom + this.offset + contentSize.height);
+      style.bottom =
+        this.constrain && (noAuto || bottom < this.screenPadding + 10)
+          ? Math.max(this.screenPadding, bottom) + "px"
+          : "auto";
+    } else if (placement.startsWith("up")) {
+      let top = rel.top - this.offset - contentSize.height - viewport.top;
+      style.top =
+        this.constrain && (noAuto || top < this.screenPadding + 10)
+          ? Math.max(this.screenPadding, top) + "px"
+          : "auto";
+      style.bottom =
+        doc.documentElement.offsetHeight -
+        (this.cover ? rel.bottom : rel.top) +
+        this.offset +
+        "px";
+    }
+
+    switch (placement) {
+      case "down":
+      case "down-center":
+        style.right = "auto";
+        style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+        break;
+
+      case "down-right":
+        style.right = "auto";
+        style.left = `${rel.left - arrowAdjust}px`;
+        break;
+
+      case "down-left":
+        style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.left = "auto";
+        break;
+
+      case "up":
+      case "up-center":
+        style.right = "auto";
+        style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
+        break;
+
+      case "up-right":
+        style.right = "auto";
+        style.left = `${rel.left - arrowAdjust}px`;
+        break;
+
+      case "up-left":
+        style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.left = "auto";
+        break;
+
+      case "right":
+      case "right-center":
+        style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+        style.right = "auto";
+        style.bottom = "auto";
+        style.left = `${rel.right + this.offset}px`;
+        break;
+
+      case "right-down":
+        style.top = `${rel.top - arrowAdjust}px`;
+        style.right = "auto";
+        style.bottom = "auto";
+        style.left = `${rel.right + this.offset}px`;
+        break;
+
+      case "right-up":
+        style.top = "auto";
+        style.right = "auto";
+        style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.left = `${rel.right + this.offset}px`;
+        break;
+
+      case "left":
+      case "left-center":
+        style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
+        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.bottom = "auto";
+        style.left = "auto";
+        break;
+
+      case "left-down":
+        style.top = `${rel.top - arrowAdjust}px`;
+        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.bottom = "auto";
+        style.left = "auto";
+        break;
+
+      case "left-up":
+        style.top = "auto";
+        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.left = "auto";
+        break;
+
+      case "screen-center":
+        let w = Math.min(
+          contentSize.width,
+          doc.documentElement.offsetWidth - 2 * this.screenPadding,
+        );
+        let h = Math.min(
+          contentSize.height,
+          doc.documentElement.offsetHeight - 2 * this.screenPadding,
+        );
+        style.top = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
+        style.right = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
+        style.bottom = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
+        style.left = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
+        break;
+    }
+  }
+
+  applyAbsolutePositioningPlacementStyles(
+    style: any,
+    placement: string,
+    contentSize: any,
+    rel: any,
+    el: HTMLElement,
+    noAuto: boolean,
+    arrowAdjust: number = 0,
+  ): void {
+    var viewport = getViewportRect(
+      this.screenPadding,
+      el.ownerDocument || document,
+    );
+
+    style.position = "absolute";
+
+    if (placement.startsWith("down")) {
+      style.top = `${rel.bottom - rel.top + this.offset}px`;
+      let room = viewport.bottom - rel.bottom + this.offset;
+      style.bottom =
+        this.constrain && (noAuto || contentSize.height >= room - 10)
+          ? `${-Math.min(room, contentSize.height)}px`
+          : "auto";
+    } else if (placement.startsWith("up")) {
+      let room = rel.top - this.offset - viewport.top;
+      style.top =
+        this.constrain && (noAuto || contentSize.height >= room - 10)
+          ? `${-Math.min(room, contentSize.height)}px`
+          : "auto";
+      style.bottom = `${rel.bottom - rel.top - this.offset}px`;
+    }
+
+    switch (placement) {
+      case "down":
+      case "down-center":
+        style.right = "auto";
+        style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+        break;
+
+      case "down-right":
+        style.right = "auto";
+        style.left = `${-arrowAdjust}px`;
+        break;
+
+      case "down-left":
+        style.right = `${-arrowAdjust}px`;
+        style.left = "auto";
+        break;
+
+      case "up":
+      case "up-center":
+        style.right = "auto";
+        style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
+        break;
+
+      case "up-right":
+        style.right = "auto";
+        style.left = `${-arrowAdjust}px`;
+        break;
+
+      case "up-left":
+        style.right = `${-arrowAdjust}px`;
+        style.left = "auto";
+        break;
+
+      case "right":
+      case "right-center":
+        style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+        style.right = "auto";
+        style.bottom = "auto";
+        style.left = `${rel.right - rel.left + this.offset}px`;
+        break;
+
+      case "right-down":
+        style.top = `${-arrowAdjust}px`;
+        style.right = "auto";
+        style.bottom = "auto";
+        style.left = `${rel.right - rel.left + this.offset}px`;
+        break;
+
+      case "right-up":
+        style.top = "auto";
+        style.right = "auto";
+        style.bottom = `${-arrowAdjust}px`;
+        style.left = `${rel.right - rel.left + this.offset}px`;
+        break;
+
+      case "left":
+      case "left-center":
+        style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
+        style.right = `${rel.right - rel.left + this.offset}px`;
+        style.bottom = "auto";
+        style.left = "auto";
+        break;
+
+      case "left-down":
+        style.top = `${-arrowAdjust}px`;
+        style.right = `${rel.right - rel.left + this.offset}px`;
+        style.bottom = "auto";
+        style.left = "auto";
+        break;
+
+      case "left-up":
+        style.top = "auto";
+        style.right = `${rel.right - rel.left + this.offset}px`;
+        style.bottom = `${-arrowAdjust}px`;
+        style.left = "auto";
+        break;
+    }
+  }
+
+  applyPositioningPlacementStyles(
+    style: any,
+    placement: string,
+    contentSize: any,
+    parentBounds: any,
+    el: HTMLElement,
+    noAuto: boolean,
+    arrowAdjust: number = 0,
+  ): void {
+    switch (this.positioning) {
+      case "absolute":
+        this.applyAbsolutePositioningPlacementStyles(
+          style,
+          placement,
+          contentSize,
+          parentBounds,
+          el,
+          noAuto,
+          arrowAdjust,
+        );
+        break;
+
+      case "auto":
+        if (isTouchDevice())
+          this.applyAbsolutePositioningPlacementStyles(
+            style,
+            placement,
+            contentSize,
+            parentBounds,
+            el,
+            noAuto,
+            arrowAdjust,
+          );
+        else
+          this.applyFixedPositioningPlacementStyles(
+            style,
+            placement,
+            contentSize,
+            parentBounds,
+            el,
+            noAuto,
+            arrowAdjust,
+          );
+        break;
+
+      default:
+        this.applyFixedPositioningPlacementStyles(
+          style,
+          placement,
+          contentSize,
+          parentBounds,
+          el,
+          noAuto,
+          arrowAdjust,
+        );
+        break;
+    }
+  }
+
+  setDirectionClass(component: any, placement: string): void {
+    var state = {
+      "place-left": false,
+      "place-right": false,
+      "place-up": false,
+      "place-down": false,
+    };
+
+    component.lastPlacement = placement;
+
+    component.setCSSState({
+      ...state,
+      ["place-" + placement]: true,
+    });
+  }
+
+  measureNaturalDropdownSize(instance: InstanceType, component: any): any {
+    var { el } = component;
+    var size = {
+      width: el.offsetWidth,
+      height: this.constrain
+        ? calculateNaturalElementHeight(el)
+        : el.offsetHeight - el.clientHeight + el.scrollHeight,
+    };
+
+    if (this.firstChildDefinesHeight && el.firstChild) {
+      size.height = el.firstChild.offsetHeight;
+    }
+
+    if (this.firstChildDefinesWidth && el.firstChild) {
+      size.width = el.firstChild.offsetWidth;
+    }
+
+    if (this.onMeasureNaturalContentSize) {
+      var more = instance.invoke(
+        "onMeasureNaturalContentSize",
+        el,
+        instance,
+        component,
       );
-      component.setCustomStyle(style);
-      this.setDirectionClass(component, placement);
-
-      if (this.constrain) {
-         //recheck content size for changes as sometimes when auto is used the size can change
-         let newContentSize = this.measureNaturalDropdownSize(instance, component);
-         if (
-            newContentSize.width != contentSize.width ||
-            newContentSize.height != contentSize.height
-         ) {
-            let newStyle = {};
-            this.applyPositioningPlacementStyles(
-               newStyle,
-               placement,
-               newContentSize,
-               parentBounds,
-               el,
-               true,
-               arrowAdjust,
-            );
-            component.setCustomStyle(newStyle);
-         }
-      }
-
-      if (!initialScreenPosition)
-         initialScreenPosition = component.initialScreenPosition = parentBounds;
-
-      if (
-         (!this.trackMouseY &&
-            Math.abs(parentBounds.top - initialScreenPosition.top) >
-            this.closeOnScrollDistance) ||
-         (!this.trackMouseX &&
-            Math.abs(parentBounds.left - initialScreenPosition.left) >
-            this.closeOnScrollDistance)
-      )
-         this.dismissAfterScroll(
-            { parentBounds, initialScreenPosition },
-            instance,
-            component,
-         );
-
-      instance.positionChangeSubscribers.notify();
-   }
-
-   getArrowAdjust(component: any): number {
-      if (!this.alignArrow || !this.arrow) return 0;
-      if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
-      if (!component.el) return 0;
-      let raw = getComputedStyle(component.el)
-         .getPropertyValue("--cx-scss-dropdown-arrow-offset")
-         .trim();
-      let parsed = parseFloat(raw);
-      if (!isFinite(parsed)) return 0;
-      component.cachedArrowOffset = parsed;
-      return parsed;
-   }
-
-   applyFixedPositioningPlacementStyles(
-      style: any,
-      placement: string,
-      contentSize: any,
-      rel: any,
-      el: HTMLElement,
-      noAuto: boolean,
-      arrowAdjust: number = 0,
-   ): void {
-      let doc = el.ownerDocument || document;
-      let viewport = getViewportRect(this.screenPadding, doc);
-      style.position = "fixed";
-
-      if (placement.startsWith("down")) {
-         style.top = `${(this.cover ? rel.top : rel.bottom) + this.offset}px`;
-         let bottom =
-            viewport.bottom - (rel.bottom + this.offset + contentSize.height);
-         style.bottom =
-            this.constrain && (noAuto || bottom < this.screenPadding + 10)
-               ? Math.max(this.screenPadding, bottom) + "px"
-               : "auto";
-      } else if (placement.startsWith("up")) {
-         let top = rel.top - this.offset - contentSize.height - viewport.top;
-         style.top =
-            this.constrain && (noAuto || top < this.screenPadding + 10)
-               ? Math.max(this.screenPadding, top) + "px"
-               : "auto";
-         style.bottom =
-            doc.documentElement.offsetHeight -
-            (this.cover ? rel.bottom : rel.top) +
-            this.offset +
-            "px";
-      }
-
-      switch (placement) {
-         case "down":
-         case "down-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "down-right":
-            style.right = "auto";
-            style.left = `${rel.left - arrowAdjust}px`;
-            break;
-
-         case "down-left":
-            style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
-            style.left = "auto";
-            break;
-
-         case "up":
-         case "up-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.left + rel.right - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "up-right":
-            style.right = "auto";
-            style.left = `${rel.left - arrowAdjust}px`;
-            break;
-
-         case "up-left":
-            style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
-            style.left = "auto";
-            break;
-
-         case "right":
-         case "right-center":
-            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "right-down":
-            style.top = `${rel.top - arrowAdjust}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "right-up":
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
-            style.left = `${rel.right + this.offset}px`;
-            break;
-
-         case "left":
-         case "left-center":
-            style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-down":
-            style.top = `${rel.top - arrowAdjust}px`;
-            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-up":
-            style.top = "auto";
-            style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
-            style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
-            style.left = "auto";
-            break;
-
-         case "screen-center":
-            let w = Math.min(
-               contentSize.width,
-               doc.documentElement.offsetWidth - 2 * this.screenPadding,
+      Object.assign(size, more);
+    }
+
+    return size;
+  }
+
+  findOptimalPlacement(
+    contentSize: any,
+    target: any,
+    placement: string,
+    lastPlacement: any,
+    el?: HTMLElement,
+  ): any {
+    var placementOrder = this.placementOrder.split(" ");
+    var best = lastPlacement || placement;
+    var first;
+
+    var score: Record<string, number> = {};
+    var viewport = getViewportRect(0, el?.ownerDocument);
+
+    for (var i = 0; i < placementOrder.length; i++) {
+      var p = placementOrder[i];
+      if (!first) first = p;
+      var parts = p.split("-");
+
+      var primary = parts[0];
+      var secondary = parts[1] || "center";
+
+      score[p] = 0;
+      var vertical = true;
+
+      switch (primary) {
+        case "down":
+          score[p] +=
+            3 *
+            Math.min(
+              1,
+              (viewport.bottom - target.bottom - this.offset) /
+                contentSize.height,
             );
-            let h = Math.min(
-               contentSize.height,
-               doc.documentElement.offsetHeight - 2 * this.screenPadding,
+          break;
+
+        case "up":
+          score[p] +=
+            3 *
+            Math.min(
+              1,
+              (target.top - viewport.top - this.offset) / contentSize.height,
             );
-            style.top = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
-            style.right = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
-            style.bottom = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
-            style.left = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
-            break;
-      }
-   }
-
-   applyAbsolutePositioningPlacementStyles(
-      style: any,
-      placement: string,
-      contentSize: any,
-      rel: any,
-      el: HTMLElement,
-      noAuto: boolean,
-      arrowAdjust: number = 0,
-   ): void {
-      var viewport = getViewportRect(this.screenPadding, el.ownerDocument || document);
-
-      style.position = "absolute";
-
-      if (placement.startsWith("down")) {
-         style.top = `${rel.bottom - rel.top + this.offset}px`;
-         let room = viewport.bottom - rel.bottom + this.offset;
-         style.bottom =
-            this.constrain && (noAuto || contentSize.height >= room - 10)
-               ? `${-Math.min(room, contentSize.height)}px`
-               : "auto";
-      } else if (placement.startsWith("up")) {
-         let room = rel.top - this.offset - viewport.top;
-         style.top =
-            this.constrain && (noAuto || contentSize.height >= room - 10)
-               ? `${-Math.min(room, contentSize.height)}px`
-               : "auto";
-         style.bottom = `${rel.bottom - rel.top - this.offset}px`;
-      }
-
-      switch (placement) {
-         case "down":
-         case "down-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "down-right":
-            style.right = "auto";
-            style.left = `${-arrowAdjust}px`;
-            break;
-
-         case "down-left":
-            style.right = `${-arrowAdjust}px`;
-            style.left = "auto";
-            break;
-
-         case "up":
-         case "up-center":
-            style.right = "auto";
-            style.left = `${Math.round((rel.right - rel.left - el.offsetWidth) / 2)}px`;
-            break;
-
-         case "up-right":
-            style.right = "auto";
-            style.left = `${-arrowAdjust}px`;
-            break;
-
-         case "up-left":
-            style.right = `${-arrowAdjust}px`;
-            style.left = "auto";
-            break;
-
-         case "right":
-         case "right-center":
-            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "right-down":
-            style.top = `${-arrowAdjust}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "right-up":
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${-arrowAdjust}px`;
-            style.left = `${rel.right - rel.left + this.offset}px`;
-            break;
-
-         case "left":
-         case "left-center":
-            style.top = `${Math.round((rel.bottom - rel.top - el.offsetHeight) / 2)}px`;
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-down":
-            style.top = `${-arrowAdjust}px`;
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            break;
-
-         case "left-up":
-            style.top = "auto";
-            style.right = `${rel.right - rel.left + this.offset}px`;
-            style.bottom = `${-arrowAdjust}px`;
-            style.left = "auto";
-            break;
-      }
-   }
-
-   applyPositioningPlacementStyles(
-      style: any,
-      placement: string,
-      contentSize: any,
-      parentBounds: any,
-      el: HTMLElement,
-      noAuto: boolean,
-      arrowAdjust: number = 0,
-   ): void {
-      switch (this.positioning) {
-         case "absolute":
-            this.applyAbsolutePositioningPlacementStyles(
-               style,
-               placement,
-               contentSize,
-               parentBounds,
-               el,
-               noAuto,
-               arrowAdjust,
-            );
-            break;
-
-         case "auto":
-            if (isTouchDevice())
-               this.applyAbsolutePositioningPlacementStyles(
-                  style,
-                  placement,
-                  contentSize,
-                  parentBounds,
-                  el,
-                  noAuto,
-                  arrowAdjust,
-               );
-            else
-               this.applyFixedPositioningPlacementStyles(
-                  style,
-                  placement,
-                  contentSize,
-                  parentBounds,
-                  el,
-                  noAuto,
-                  arrowAdjust,
-               );
-            break;
-
-         default:
-            this.applyFixedPositioningPlacementStyles(
-               style,
-               placement,
-               contentSize,
-               parentBounds,
-               el,
-               noAuto,
-               arrowAdjust,
-            );
-            break;
-      }
-   }
-
-   setDirectionClass(component: any, placement: string): void {
-      var state = {
-         "place-left": false,
-         "place-right": false,
-         "place-up": false,
-         "place-down": false,
-      };
-
-      component.lastPlacement = placement;
-
-      component.setCSSState({
-         ...state,
-         ["place-" + placement]: true,
-      });
-   }
-
-   measureNaturalDropdownSize(instance: InstanceType, component: any): any {
-      var { el } = component;
-      var size = {
-         width: el.offsetWidth,
-         height: this.constrain
-            ? calculateNaturalElementHeight(el)
-            : el.offsetHeight - el.clientHeight + el.scrollHeight,
-      };
-
-      if (this.firstChildDefinesHeight && el.firstChild) {
-         size.height = el.firstChild.offsetHeight;
-      }
-
-      if (this.firstChildDefinesWidth && el.firstChild) {
-         size.width = el.firstChild.offsetWidth;
+          break;
+
+        case "right":
+          score[p] +=
+            target.right + contentSize.width + this.offset < viewport.right
+              ? 3
+              : 0;
+          vertical = false;
+          break;
+
+        case "left":
+          score[p] +=
+            target.left - contentSize.width - this.offset >= viewport.left
+              ? 3
+              : 0;
+          vertical = false;
+          break;
       }
 
-      if (this.onMeasureNaturalContentSize) {
-         var more = instance.invoke(
-            "onMeasureNaturalContentSize",
-            el,
-            instance,
-            component,
-         );
-         Object.assign(size, more);
-      }
-
-      return size;
-   }
-
-   findOptimalPlacement(
-      contentSize: any,
-      target: any,
-      placement: string,
-      lastPlacement: any,
-      el?: HTMLElement
-   ): any {
-      var placementOrder = this.placementOrder.split(" ");
-      var best = lastPlacement || placement;
-      var first;
-
-      var score: Record<string, number> = {};
-      var viewport = getViewportRect(0, el?.ownerDocument);
-
-      for (var i = 0; i < placementOrder.length; i++) {
-         var p = placementOrder[i];
-         if (!first) first = p;
-         var parts = p.split("-");
-
-         var primary = parts[0];
-         var secondary = parts[1] || "center";
-
-         score[p] = 0;
-         var vertical = true;
-
-         switch (primary) {
-            case "down":
-               score[p] +=
-                  3 *
-                  Math.min(
-                     1,
-                     (viewport.bottom - target.bottom - this.offset) /
-                     contentSize.height,
-                  );
-               break;
-
-            case "up":
-               score[p] +=
-                  3 *
-                  Math.min(
-                     1,
-                     (target.top - viewport.top - this.offset) / contentSize.height,
-                  );
-               break;
-
-            case "right":
-               score[p] +=
-                  target.right + contentSize.width + this.offset < viewport.right
-                     ? 3
-                     : 0;
-               vertical = false;
-               break;
-
-            case "left":
-               score[p] +=
-                  target.left - contentSize.width - this.offset >= viewport.left
-                     ? 3
-                     : 0;
-               vertical = false;
-               break;
-         }
-
-         switch (secondary) {
-            case "center":
-               if (vertical) {
-                  score[p] +=
-                     (target.right + target.left - contentSize.width) / 2 >=
-                        viewport.left
-                        ? 1
-                        : 0;
-                  score[p] +=
-                     (target.right + target.left + contentSize.width) / 2 <
-                        viewport.right
-                        ? 1
-                        : 0;
-               } else {
-                  score[p] +=
-                     (target.bottom + target.top - contentSize.height) / 2 >=
-                        viewport.top
-                        ? 1
-                        : 0;
-                  score[p] +=
-                     (target.bottom + target.top + contentSize.height) / 2 <
-                        viewport.bottom
-                        ? 1
-                        : 0;
-               }
-               break;
-
-            case "right":
-               score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
-               break;
-
-            case "left":
-               score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
-               break;
-
-            case "up":
-               score[p] +=
-                  target.bottom - contentSize.height >= viewport.top ? 2 : 0;
-               break;
-
-            case "down":
-               score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
-               break;
-         }
-      }
-
-      if (!(best in score)) best = first;
-
-      for (var k in score) if (score[k] > score[best]) best = k;
-
-      if (this.touchFriendly && isTouchDevice() && score[best] < 5)
-         return "screen-center";
-
-      return best;
-   }
-
-   handleKeyDown(e: React.KeyboardEvent, instance: InstanceType) {
-      switch (e.keyCode) {
-         case 27: //esc
-            var focusable = findFirst(instance.relatedElement!, isFocusable);
-            if (focusable) focusable.focus();
-            e.stopPropagation();
-            e.preventDefault();
-            break;
+      switch (secondary) {
+        case "center":
+          if (vertical) {
+            score[p] +=
+              (target.right + target.left - contentSize.width) / 2 >=
+              viewport.left
+                ? 1
+                : 0;
+            score[p] +=
+              (target.right + target.left + contentSize.width) / 2 <
+              viewport.right
+                ? 1
+                : 0;
+          } else {
+            score[p] +=
+              (target.bottom + target.top - contentSize.height) / 2 >=
+              viewport.top
+                ? 1
+                : 0;
+            score[p] +=
+              (target.bottom + target.top + contentSize.height) / 2 <
+              viewport.bottom
+                ? 1
+                : 0;
+          }
+          break;
+
+        case "right":
+          score[p] += target.left + contentSize.width < viewport.right ? 2 : 0;
+          break;
+
+        case "left":
+          score[p] += target.right - contentSize.width >= viewport.left ? 2 : 0;
+          break;
+
+        case "up":
+          score[p] +=
+            target.bottom - contentSize.height >= viewport.top ? 2 : 0;
+          break;
+
+        case "down":
+          score[p] += target.top + contentSize.height < viewport.bottom ? 2 : 0;
+          break;
       }
-
-      if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
-   }
-
-   renderContents(context: RenderingContext, instance: InstanceType) {
-      let { CSS, baseClass } = this;
-      let result = [super.renderContents(context, instance)];
-      if (this.arrow) {
-         result.push(
-            <div
-               key="arrow-border"
-               className={CSS.element(baseClass, "arrow-border")}
-            ></div>,
-            <div
-               key="arrow-back"
-               className={CSS.element(baseClass, "arrow-fill")}
-            ></div>,
-         );
-      }
-      return result;
-   }
-
-   render(context: RenderingContext, instance: InstanceType, key: string) {
-      let { CSS, baseClass } = this;
-      //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
-      //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
-      let beacon = null;
-      if (this.relatedElement) instance.relatedElement = this.relatedElement;
-
-      if (!this.relatedElement || instance.needsBeacon) {
-         beacon = (
-            <div
-               key={`${key}-beacon`}
-               className={CSS.element(baseClass, "beacon")}
-               ref={(el) => {
-                  if (instance.relatedElement || !el) return;
-                  let target: HTMLElement | null = el;
-                  if (this.onResolveRelatedElement)
-                     target = instance.invoke("onResolveRelatedElement", el, instance);
-                  else target = el.previousElementSibling as HTMLElement;
-                  if (!target) target = el;
-                  if (target == el) instance.needsBeacon = true;
-                  instance.relatedElement = target;
-                  instance.setState({ dummy: {} });
-               }}
-            />
-         );
-      }
-      return [
-         beacon,
-         instance.relatedElement && super.render(context, instance, key),
-      ];
-   }
-
-   getOverlayContainer(): HTMLElement {
-      // this should be instance.relatedElement
-      if (this.relatedElement) {
-         let container = closestParent(
-            this.relatedElement,
-            (el) => el.dataset && !!el.dataset.focusableOverlayContainer,
-         );
-         if (container) return container;
-      }
-      return super.getOverlayContainer();
-   }
-
-   getConfigureOverlayContainerContext(
-      instance?: DropdownInstance,
-   ): ConfigureOverlayContainerContext {
-      return {
-         ...super.getConfigureOverlayContainerContext(),
-         relatedElement: instance?.relatedElement ?? this.relatedElement,
-      };
-   }
+    }
+
+    if (!(best in score)) best = first;
+
+    for (var k in score) if (score[k] > score[best]) best = k;
+
+    if (this.touchFriendly && isTouchDevice() && score[best] < 5)
+      return "screen-center";
+
+    return best;
+  }
+
+  handleKeyDown(e: React.KeyboardEvent, instance: InstanceType) {
+    switch (e.keyCode) {
+      case 27: //esc
+        var focusable = findFirst(instance.relatedElement!, isFocusable);
+        if (focusable) focusable.focus();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+    }
+
+    if (this.onKeyDown) instance.invoke("onKeyDown", e, instance);
+  }
+
+  renderContents(context: RenderingContext, instance: InstanceType) {
+    let { CSS, baseClass } = this;
+    let result = [super.renderContents(context, instance)];
+    if (this.arrow) {
+      result.push(
+        <div
+          key="arrow-border"
+          className={CSS.element(baseClass, "arrow-border")}
+        ></div>,
+        <div
+          key="arrow-back"
+          className={CSS.element(baseClass, "arrow-fill")}
+        ></div>,
+      );
+    }
+    return result;
+  }
+
+  render(context: RenderingContext, instance: InstanceType, key: string) {
+    let { CSS, baseClass } = this;
+    //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
+    //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
+    let beacon = null;
+    if (this.relatedElement) instance.relatedElement = this.relatedElement;
+
+    if (!this.relatedElement || instance.needsBeacon) {
+      beacon = (
+        <div
+          key={`${key}-beacon`}
+          className={CSS.element(baseClass, "beacon")}
+          ref={(el) => {
+            if (instance.relatedElement || !el) return;
+            let target: HTMLElement | null = el;
+            if (this.onResolveRelatedElement)
+              target = instance.invoke("onResolveRelatedElement", el, instance);
+            else target = el.previousElementSibling as HTMLElement;
+            if (!target) target = el;
+            if (target == el) instance.needsBeacon = true;
+            instance.relatedElement = target;
+            instance.setState({ dummy: {} });
+          }}
+        />
+      );
+    }
+    return [
+      beacon,
+      instance.relatedElement && super.render(context, instance, key),
+    ];
+  }
+
+  getOverlayContainer(): HTMLElement {
+    // this should be instance.relatedElement
+    if (this.relatedElement) {
+      let container = closestParent(
+        this.relatedElement,
+        (el) => el.dataset && !!el.dataset.focusableOverlayContainer,
+      );
+      if (container) return container;
+    }
+    return super.getOverlayContainer();
+  }
+
+  getConfigureOverlayContainerContext(
+    instance?: DropdownInstance,
+  ): ConfigureOverlayContainerContext {
+    return {
+      ...super.getConfigureOverlayContainerContext(),
+      relatedElement: instance?.relatedElement ?? this.relatedElement,
+    };
+  }
 }
 
 DropdownBase.prototype.offset = 0;
@@ -976,16 +980,16 @@ DropdownBase.prototype.firstChildDefinesHeight = false;
 DropdownBase.prototype.firstChildDefinesWidth = false;
 DropdownBase.prototype.cover = false;
 
-export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> { }
+export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
 
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
 function getViewportRect(padding = 0, doc: Document = document) {
-   return {
-      left: padding,
-      top: padding,
-      right: doc.documentElement.offsetWidth - padding,
-      bottom: doc.documentElement.offsetHeight - padding,
-   };
+  return {
+    left: padding,
+    top: padding,
+    right: doc.documentElement.offsetWidth - padding,
+    bottom: doc.documentElement.offsetHeight - padding,
+  };
 }

From 37ca7316604b388814903f0c30554a0083420a3a Mon Sep 17 00:00:00 2001
From: Milan Kovacevic <milan.kovacevic@codaxy.com>
Date: Wed, 9 Sep 2026 08:41:24 +0200
Subject: [PATCH 5/5] Enhance dropdown and context menu behavior for iframe
 elements

- Implemented context menu handling for focusable elements within iframes to prevent premature dismissal.
- Updated dropdown positioning logic to account for elements residing in different documents (iframes).
- Improved active element retrieval across document boundaries to ensure accurate focus management.
---
 .../dropdown/context-menu-iframe-focus.js     |  57 +++++++++
 .../dropdown/lookup-inside-iframe-portal.js   |  18 +--
 .../dropdown/lookup-inside-real-iframe.js     |   9 ++
 litmus/index.js                               |   1 +
 packages/cx/src/util/DOM.ts                   |  19 ++-
 packages/cx/src/util/getActiveElement.ts      |  10 +-
 packages/cx/src/widgets/nav/MenuItem.tsx      |   4 +-
 packages/cx/src/widgets/overlay/Dropdown.tsx  | 109 +++++++++++++-----
 packages/cx/src/widgets/overlay/Window.tsx    |   3 +-
 9 files changed, 180 insertions(+), 50 deletions(-)
 create mode 100644 litmus/features/dropdown/context-menu-iframe-focus.js

diff --git a/litmus/features/dropdown/context-menu-iframe-focus.js b/litmus/features/dropdown/context-menu-iframe-focus.js
new file mode 100644
index 000000000..4a9974fa4
--- /dev/null
+++ b/litmus/features/dropdown/context-menu-iframe-focus.js
@@ -0,0 +1,57 @@
+import { openContextMenu } from "cx/widgets";
+import { Controller } from "cx/ui";
+import { IFramePortal } from "./IFramePortal";
+
+// Bug repro: ContextMenu has dismissOnFocusOut enabled by default. Its content
+// below embeds a same-origin iframe (via IFramePortal) with a focusable text
+// input. Right-click the box to open the menu, then click inside the
+// iframe's input field - the menu should stay open, since focus never
+// actually left the menu.
+//
+// Before the fix: the outer document's `document.activeElement` only ever
+// reports the <iframe> element itself as focused, and Node.contains() cannot
+// see across the document boundary into the iframe's own document, so
+// FocusManager treated this as focus leaving the menu entirely and dismissed
+// it immediately.
+
+class PageController extends Controller {}
+
+export default (
+  <cx>
+    <div
+      controller={PageController}
+      style="font-family: sans-serif; padding: 16px; display: flex; flexDirection: column;"
+    >
+      <p style="max-width: 480px; margin: 0 0 16px;">
+        Right-click the box below to open a ContextMenu, then click inside the
+        embedded iframe's text input. The menu should remain open while
+        that field has focus.
+      </p>
+      <div
+        onContextMenu={(e, instance) =>
+          openContextMenu(
+            e,
+            <cx>
+              <div style="padding: 8px;">
+                <div style="margin-bottom: 8px;">
+                  Menu content with an embedded iframe:
+                </div>
+                <IFramePortal
+                  style={{ width: "260px", height: "90px", border: "1px solid #999" }}
+                >
+                  <div style="padding: 8px; font-family: sans-serif;">
+                    <input type="text" placeholder="Focus me" style="width: 100%;" />
+                  </div>
+                </IFramePortal>
+              </div>
+            </cx>,
+            instance,
+          )
+        }
+        style="padding: 40px; border: 1px dashed #999; width: 300px; text-align: center;"
+      >
+        Right Click Here
+      </div>
+    </div>
+  </cx>
+);
diff --git a/litmus/features/dropdown/lookup-inside-iframe-portal.js b/litmus/features/dropdown/lookup-inside-iframe-portal.js
index 232aca036..258b86d35 100644
--- a/litmus/features/dropdown/lookup-inside-iframe-portal.js
+++ b/litmus/features/dropdown/lookup-inside-iframe-portal.js
@@ -46,11 +46,15 @@ export default (
       </p>
 
       <p style="max-width: 420px; margin: 0 0 16px;">
-        The parent document's lookup has a red background, so the
-        inline-rendered lookup inside IFramePortal will pick up this style,
-        while the other lookup will not. Since IFramePortal does not allow
-        stylesheets from the outer document to leak into the iframe, we achieve
-        the desired style isolation on the other lookup.
+        IFramePortal copies every outer stylesheet into the iframe document (see
+        copyStyles), so both rules below - the red base rule and the more
+        specific blue ".inner-lookup" override - are present inside the iframe.
+        The lookup rendered inline (actually inside the iframe DOM, nested under
+        ".inner-lookup") matches the blue override. The lookup with
+        dropdownOptions inline false portals its dropdown out to the parent
+        document's body instead, outside the ".inner-lookup" ancestor, so it
+        only matches the red base rule and is not isolated from the parent
+        document at all.
       </p>
       <LabelsTopLayout>
         <LookupField
@@ -73,7 +77,7 @@ export default (
           <LabelsTopLayout>
             <LookupField
               class="inner-lookup"
-              label="IFrame Portal Lookup (inline)"
+              label="IFrame Portal Lookup"
               value-bind="city"
               options-bind="cities"
               placeholder="Select a city..."
@@ -83,7 +87,7 @@ export default (
             />
             <LookupField
               class="inner-lookup"
-              label="IFrame Portal Lookup"
+              label="IFrame Portal Lookup (inline)"
               value-bind="city"
               options-bind="cities"
               placeholder="Select a city..."
diff --git a/litmus/features/dropdown/lookup-inside-real-iframe.js b/litmus/features/dropdown/lookup-inside-real-iframe.js
index 38c1cf4ca..cb86eb229 100644
--- a/litmus/features/dropdown/lookup-inside-real-iframe.js
+++ b/litmus/features/dropdown/lookup-inside-real-iframe.js
@@ -49,6 +49,15 @@ const HostPage = (
         navigation via iframe src, not a React portal). Open its dropdown and
         check whether it's positioned correctly relative to the field.
       </p>
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        This also doubles as a repro for a related viewport-size bug: the
+        framed field has very little content compared to the iframe's 600px
+        height, and the framed page doesn't set html/body height to 100%
+        (the default). If the dropdown ever measures the fixed-position
+        viewport off the framed document's content height instead of its
+        actual (much taller) viewport, it will think there's no room below
+        the field and open upward instead of downward.
+      </p>
       <LabelsTopLayout>
         <LookupField
           label="Parent Document Lookup"
diff --git a/litmus/index.js b/litmus/index.js
index 0e5d05fb1..eadadfe6e 100644
--- a/litmus/index.js
+++ b/litmus/index.js
@@ -143,6 +143,7 @@ import "./index.scss";
 //import Demo from "./features/window/resize-cursor";
 import Demo from "./features/dropdown/lookup-inside-iframe-portal";
 // import Demo from "./features/dropdown/lookup-inside-real-iframe";
+// import Demo from "./features/dropdown/context-menu-iframe-focus";
 // import Demo from "./bugs/GridDefaultSortFieldClearableSortIssue";
 // import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
 // import Demo from "./bugs/GridOnFetchRecords";
diff --git a/packages/cx/src/util/DOM.ts b/packages/cx/src/util/DOM.ts
index 80e6acbcb..30ab59228 100644
--- a/packages/cx/src/util/DOM.ts
+++ b/packages/cx/src/util/DOM.ts
@@ -1,4 +1,5 @@
 import { isNumber } from "../util/isNumber";
+import { getActiveElement } from "./getActiveElement";
 
 type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
 
@@ -51,11 +52,11 @@ export function closestParent(el: Element, condition: (el: any) => boolean): HTM
 }
 
 export function isFocused(el: Element): boolean {
-   return document.activeElement == el;
+   return getActiveElement() == el;
 }
 
 export function isFocusedDeep(el: Element): boolean {
-   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
+   return isSelfOrDescendant(el, getActiveElement());
 }
 
 const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
@@ -76,13 +77,23 @@ export function isFocusable(el: Element): el is HTMLElement {
  * @returns {Element}
  */
 export function getFocusedElement(): Element | null {
-   return document.activeElement;
+   return getActiveElement();
 }
 
 export function isDescendant(el: Element, descEl: Element): boolean {
    return el.contains(descEl);
 }
 
+//`descEl` may live in a different document than `el` (e.g. focus is inside a same-origin
+//iframe) - Node.contains never crosses document boundaries, so walk out through each
+//frame's <iframe> element in its parent document until we either cross into el's document
+//or run out of ancestor frames.
 export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
-   return el == descEl || el.contains(descEl);
+   let node: Element | null | undefined = descEl;
+   while (node) {
+      if (el == node || el.contains(node)) return true;
+      let win: Window | null = node.ownerDocument?.defaultView;
+      node = win?.frameElement;
+   }
+   return false;
 }
diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
index e9d21b8d1..03a617644 100644
--- a/packages/cx/src/util/getActiveElement.ts
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -1,7 +1,6 @@
 //IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(doc?: Document): Element {
-  if (!doc) doc = document;
-  let active = doc?.activeElement ?? doc?.body;
+export function getActiveElement(doc: Document = document): Element {
+  let active = doc.activeElement ?? doc.body;
 
   //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
   //<iframe> element itself - drill into its own document to find the element that's
@@ -9,7 +8,10 @@ export function getActiveElement(doc?: Document): Element {
   if (active && active.tagName === "IFRAME") {
     const iframe = active as HTMLIFrameElement;
     let frameDoc = iframe.contentDocument;
-    if (frameDoc) return getActiveElement(frameDoc);
+    if (frameDoc) {
+      const inner = getActiveElement(frameDoc);
+      return inner ?? active;
+    }
   }
 
   return active;
diff --git a/packages/cx/src/widgets/nav/MenuItem.tsx b/packages/cx/src/widgets/nav/MenuItem.tsx
index bbc55d28e..90805bf87 100644
--- a/packages/cx/src/widgets/nav/MenuItem.tsx
+++ b/packages/cx/src/widgets/nav/MenuItem.tsx
@@ -385,7 +385,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
          debug(menuFlag, "MenuItem", "mouseLeave", this.el);
          this.clearAutoFocusTimer();
 
-         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el!);
+         if (widget.hoverToOpen && getActiveElement() == this.el) unfocusElement(this.el!);
       }
 
       tooltipMouseLeave(e, this.props.instance, widget.tooltip);
@@ -486,7 +486,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
       let { widget } = this.props.instance;
       if (widget.dropdown) {
          oneFocusOut(this, this.el!, this.onFocusOut.bind(this));
-         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
+         debug(menuFlag, "MenuItem", "focus", this.el, getActiveElement());
          this.clearAutoFocusTimer();
          if (widget.openOnFocus) this.openDropdown();
       }
diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
index 0dbdb0d00..62f5f87da 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.tsx
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -5,6 +5,7 @@ import { Widget, VDOM } from "../../ui/Widget";
 import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
 import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import {
   ConfigureOverlayContainerContext,
@@ -224,6 +225,23 @@ export class DropdownBase<
       component.updateDropdownPosition,
     );
 
+    //if the related element lives in a different document (e.g. inside a same-origin
+    //iframe), that document/window has its own scroll position and its own resize event
+    //(which also fires when the <iframe> element itself is resized) - neither is observed
+    //by the top-level `window` above or by the relatedElement's parentElement chain, so
+    //track every frame window between the related element's document and the top document.
+    var frameWindows: Window[] = (component.frameWindows = []);
+    var frameWin: Window | null | undefined =
+      instance.relatedElement?.ownerDocument?.defaultView;
+    while (frameWin && frameWin !== window) {
+      frameWindows.push(frameWin);
+      frameWin = frameWin.frameElement?.ownerDocument?.defaultView;
+    }
+    frameWindows.forEach((w) => {
+      w.addEventListener("scroll", component.updateDropdownPosition);
+      w.addEventListener("resize", component.updateDropdownPosition);
+    });
+
     if (this.onDropdownDidMount)
       instance.invoke("onDropdownDidMount", instance, component);
 
@@ -246,14 +264,21 @@ export class DropdownBase<
   }
 
   overlayWillUnmount(instance: InstanceType, component: any): void {
-    var { scrollableParents } = component;
+    var { scrollableParents, frameWindows } = component;
     if (scrollableParents) {
       scrollableParents.forEach((el: Element) => {
         el.removeEventListener("scroll", component.updateDropdownPosition);
       });
       delete component.scrollableParents;
-      delete component.updateDropdownPosition;
     }
+    if (frameWindows) {
+      frameWindows.forEach((w: Window) => {
+        w.removeEventListener("scroll", component.updateDropdownPosition);
+        w.removeEventListener("resize", component.updateDropdownPosition);
+      });
+      delete component.frameWindows;
+    }
+    delete component.updateDropdownPosition;
     if (component.offResize) component.offResize();
 
     if (this.pipeValidateDropdownPosition)
@@ -278,6 +303,7 @@ export class DropdownBase<
   updateDropdownPosition(instance: InstanceType, component: any): void {
     var { el, initialScreenPosition } = component;
     var { data, relatedElement } = instance;
+    var elDocument: Document = el.ownerDocument || document;
 
     //if the dropdown renders in the same document as its related element (e.g. not
     //portaled to the top-level body, such as an inline dropdown living inside an
@@ -300,19 +326,33 @@ export class DropdownBase<
       parentBounds = component.parentBounds;
     } else component.parentBounds = parentBounds;
 
-    if (this.trackMouseX && instance.mousePosition) {
+    //instance.mousePosition (set from getCursorPos) is always expressed in top-document
+    //coordinates. When the dropdown and its related element share a document that isn't
+    //the top document (e.g. both live inside the same iframe), parentBounds above is in
+    //that document's own coordinate space, so the mouse position must be translated into
+    //the same space before it can replace part of parentBounds.
+    var mousePosition = instance.mousePosition;
+    if (mousePosition && isSameDocument && elDocument !== document) {
+      const frameOffset = getParentFrameBoundingClientRect(relatedElement!);
+      mousePosition = {
+        x: mousePosition.x - frameOffset.left,
+        y: mousePosition.y - frameOffset.top,
+      };
+    }
+
+    if (this.trackMouseX && mousePosition) {
       parentBounds = new DOMRect(
-        instance.mousePosition.x,
+        mousePosition.x,
         parentBounds.top,
         0,
         parentBounds.bottom - parentBounds.top,
       );
     }
 
-    if (this.trackMouseY && instance.mousePosition) {
+    if (this.trackMouseY && mousePosition) {
       parentBounds = new DOMRect(
         parentBounds.left,
-        instance.mousePosition.y,
+        mousePosition.y,
         parentBounds.right - parentBounds.left,
         0,
       );
@@ -343,7 +383,7 @@ export class DropdownBase<
       parentBounds,
       data.placement,
       component.lastPlacement,
-      el,
+      elDocument,
     );
 
     var arrowAdjust = this.getArrowAdjust(component);
@@ -356,6 +396,7 @@ export class DropdownBase<
       el,
       false,
       arrowAdjust,
+      elDocument,
     );
     component.setCustomStyle(style);
     this.setDirectionClass(component, placement);
@@ -376,6 +417,7 @@ export class DropdownBase<
           el,
           true,
           arrowAdjust,
+          elDocument,
         );
         component.setCustomStyle(newStyle);
       }
@@ -422,9 +464,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    let doc = el.ownerDocument || document;
-    let viewport = getViewportRect(this.screenPadding, doc);
+    let viewport = getViewportRect(this.screenPadding, elDocument);
     style.position = "fixed";
 
     if (placement.startsWith("down")) {
@@ -442,7 +484,7 @@ export class DropdownBase<
           ? Math.max(this.screenPadding, top) + "px"
           : "auto";
       style.bottom =
-        doc.documentElement.offsetHeight -
+        elDocument.documentElement.clientHeight -
         (this.cover ? rel.bottom : rel.top) +
         this.offset +
         "px";
@@ -461,7 +503,7 @@ export class DropdownBase<
         break;
 
       case "down-left":
-        style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -477,7 +519,7 @@ export class DropdownBase<
         break;
 
       case "up-left":
-        style.right = `${doc.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -499,45 +541,45 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = `${rel.right + this.offset}px`;
         break;
 
       case "left":
       case "left-center":
         style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-down":
         style.top = `${rel.top - arrowAdjust}px`;
-        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-up":
         style.top = "auto";
-        style.right = `${doc.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${doc.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = "auto";
         break;
 
       case "screen-center":
         let w = Math.min(
           contentSize.width,
-          doc.documentElement.offsetWidth - 2 * this.screenPadding,
+          elDocument.documentElement.clientWidth - 2 * this.screenPadding,
         );
         let h = Math.min(
           contentSize.height,
-          doc.documentElement.offsetHeight - 2 * this.screenPadding,
+          elDocument.documentElement.clientHeight - 2 * this.screenPadding,
         );
-        style.top = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
-        style.right = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
-        style.bottom = `${Math.round((doc.documentElement.offsetHeight - h) / 2)}px`;
-        style.left = `${Math.round((doc.documentElement.offsetWidth - w) / 2)}px`;
+        style.top = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.right = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
+        style.bottom = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.left = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
         break;
     }
   }
@@ -550,11 +592,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    var viewport = getViewportRect(
-      this.screenPadding,
-      el.ownerDocument || document,
-    );
+    var viewport = getViewportRect(this.screenPadding, elDocument);
 
     style.position = "absolute";
 
@@ -661,6 +701,7 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
     switch (this.positioning) {
       case "absolute":
@@ -672,6 +713,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
 
@@ -685,6 +727,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         else
           this.applyFixedPositioningPlacementStyles(
@@ -695,6 +738,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         break;
 
@@ -707,6 +751,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
     }
@@ -763,14 +808,14 @@ export class DropdownBase<
     target: any,
     placement: string,
     lastPlacement: any,
-    el?: HTMLElement,
+    elDocument: Document,
   ): any {
     var placementOrder = this.placementOrder.split(" ");
     var best = lastPlacement || placement;
     var first;
 
     var score: Record<string, number> = {};
-    var viewport = getViewportRect(0, el?.ownerDocument);
+    var viewport = getViewportRect(0, elDocument);
 
     for (var i = 0; i < placementOrder.length; i++) {
       var p = placementOrder[i];
@@ -985,11 +1030,11 @@ export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
-function getViewportRect(padding = 0, doc: Document = document) {
+function getViewportRect(padding = 0, elDocument: Document = document) {
   return {
     left: padding,
     top: padding,
-    right: doc.documentElement.offsetWidth - padding,
-    bottom: doc.documentElement.offsetHeight - padding,
+    right: elDocument.documentElement.clientWidth - padding,
+    bottom: elDocument.documentElement.clientHeight - padding,
   };
 }
diff --git a/packages/cx/src/widgets/overlay/Window.tsx b/packages/cx/src/widgets/overlay/Window.tsx
index 183840be4..db6dbdc35 100644
--- a/packages/cx/src/widgets/overlay/Window.tsx
+++ b/packages/cx/src/widgets/overlay/Window.tsx
@@ -21,6 +21,7 @@ import { isDefined } from "../../util/isDefined";
 import { isString } from "../../util/isString";
 import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
+import { getActiveElement } from "src/util";
 
 export interface WindowConfig extends OverlayConfig {
    /** Text to be displayed in the header. */
@@ -292,7 +293,7 @@ class WindowComponent extends OverlayComponent<WindowComponentProps, WindowCompo
    onFocusIn() {
       super.onFocusIn();
       if (!this.state.active) {
-         if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         if (this.containerEl?.contains(getActiveElement())) this.setZIndex(ZIndexManager.next());
          this.setState({ active: true });
       }
    }