cx 26.7.6 → 26.9.0

package/src/widgets/grid/Grid.sorting.spec.tsx

@@ -0,0 +1,188 @@
+import assert from "assert";
+import { Store } from "../../data/Store";
+import { Grid } from "./Grid";
+import { bind } from "../../ui/bind";
+import { computable } from "../../data/computable";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
+
+// priorities 1, 2, 10 sort differently as numbers (1, 2, 10) than their
+// "P{priority}" labels do as strings (P1, P10, P2), which makes the sort key
+// precedence (sortValue > sortField > value > field) observable in the output
+let records = [
+   { id: 1, priority: 2 },
+   { id: 2, priority: 10 },
+   { id: 3, priority: 1 },
+];
+
+function textOf(node: any): string {
+   if (node == null) return "";
+   if (typeof node == "string") return node;
+   if (Array.isArray(node)) return node.map(textOf).join("");
+   return textOf(node.children);
+}
+
+function findAll(node: any, predicate: (el: any) => boolean, result: any[] = []): any[] {
+   if (node == null || typeof node == "string") return result;
+   if (Array.isArray(node)) {
+      node.forEach((child) => findAll(child, predicate, result));
+      return result;
+   }
+   if (predicate(node)) result.push(node);
+   findAll(node.children, predicate, result);
+   return result;
+}
+
+function getRenderedLabels(component: any): string[] {
+   let tds = findAll(component.toJSON(), (el) => el.type == "td");
+   return tds.map(textOf);
+}
+
+async function clickHeader(component: any, text: string) {
+   let th = component.root.findAllByType("th").find((t: any) => thText(t) == text);
+   assert.ok(th, `Header cell "${text}" not found`);
+   await act(async () => {
+      th.props.onClick({ preventDefault() {}, stopPropagation() {} });
+   });
+}
+
+function thText(th: any): string {
+   return th.children.map((c: any) => (typeof c == "string" ? c : "")).join("");
+}
+
+describe("Grid sorting precedence", () => {
+   it("sorts by sortField instead of the displayed value when both are set", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P2", "P10"]);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P10", "P2", "P1"]);
+   });
+
+   it("sortValue takes precedence over sortField", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     sortValue: computable("$record.priority", (p: number) => -p),
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P10", "P2", "P1"]);
+   });
+
+   it("sorts by the displayed value when no sortField is set", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     field: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P10", "P2"]);
+   });
+
+   it("applies sortField precedence to sorters restored from sortField/sortDirection bindings", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               sortField={bind("sortField")}
+               sortDirection={bind("sortDirection")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({
+         data: { records, sortField: "priority", sortDirection: "ASC" },
+      });
+      const component = await createTestRenderer(store, widget);
+
+      assert.deepStrictEqual(getRenderedLabels(component), ["P1", "P2", "P10"]);
+   });
+
+   it("marks only the clicked column as sorted", async () => {
+      let widget = (
+         <cx>
+            <Grid
+               records={bind("records")}
+               columns={[
+                  {
+                     header: "Priority",
+                     sortField: "priority",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+                  {
+                     header: "Label",
+                     value: { tpl: "P{$record.priority}" },
+                     sortable: true,
+                  },
+               ]}
+            />
+         </cx>
+      );
+
+      let store = new Store({ data: { records } });
+      const component = await createTestRenderer(store, widget);
+
+      await clickHeader(component, "Priority");
+
+      let ths = component.root.findAllByType("th");
+      let sorted = ths.filter((th: any) => (th.props.className || "").includes("sorted-asc"));
+      assert.strictEqual(sorted.length, 1);
+      assert.strictEqual(thText(sorted[0]), "Priority");
+   });
+});

package/src/widgets/grid/Grid.tsx

@@ -72,10 +72,11 @@ import DropDownIcon from "../icons/sort-asc";
 import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
 import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
 import { createGridCellEditor } from "./createGridCellEditor";
-import { GridRow, GridRowComponent, GridRowConfig, GridRowInstance } from "./GridRow";
+import { GridRow, GridRowComponent, GridRowInstance } from "./GridRow";
+import type { GridRowConfig } from "./GridRow";
 import { Create, CreateConfig } from "../../util";
 import type { TreeAdapter } from "../../ui/adapter/TreeAdapter";
-export { GridRowConfig };
+export type { GridRowConfig };
 
 export type GridFetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
 
@@ -241,7 +242,16 @@ export interface GridColumnConfig {
    children?: ChildNode | ChildNode[];
    key?: string;
    pad?: boolean;
+   /**
+    * Record field used for sorting instead of `field` or the displayed `value`.
+    * Use it when the column displays a computed value but should sort by raw data.
+    * Sort key precedence: `sortValue` > `sortField` > `value` > `field`.
+    */
    sortField?: string;
+   /**
+    * Selector (binding, template, expression or computable) used for sorting instead
+    * of `field`, `sortField` or the displayed `value`. Takes the highest precedence.
+    */
    sortValue?: Prop<any>;
    style?: StyleProp;
    trimWhitespace?: boolean;
@@ -944,9 +954,15 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       if (sortField) {
          for (let l = 0; l < 10; l++) {
             let line = instance.row[`line${l}`];
-            let sortColumn = line && line.columns && line.columns.find((c: any) => (c.sortField || c.field) == sortField);
+            let sortColumn =
+               line && line.columns && line.columns.find((c: any) => (c.sortField || c.field) == sortField);
             if (sortColumn) {
-               data.sorters[0].value = isDefined(sortColumn.sortValue) ? sortColumn.sortValue : sortColumn.value;
+               // precedence: sortValue > sortField > value > field
+               data.sorters[0].value = isDefined(sortColumn.sortValue)
+                  ? sortColumn.sortValue
+                  : sortColumn.sortField
+                    ? undefined
+                    : sortColumn.value;
                data.sorters[0].comparer = sortColumn.comparer;
                data.sorters[0].sortOptions = sortColumn.sortOptions;
                break;
@@ -1312,13 +1328,19 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                      mods.push("sortable");
                      let sorter = data.sorters && data.sorters[0];
                      let sortColumnField = hdwidget.sortField || hdwidget.field;
-                     let sortColumnValue = isDefined(hdwidget.sortValue) ? hdwidget.sortValue : hdwidget.value;
+                     let sortColumnValue = isDefined(hdwidget.sortValue)
+                        ? hdwidget.sortValue
+                        : hdwidget.sortField
+                          ? undefined
+                          : hdwidget.value;
                      // a sort is identified by its (field, value selector) pair, so columns
                      // sorting by the same field through different value selectors don't both match
                      let sorted =
                         sorter &&
                         !!sorter.direction &&
-                        (sortColumnField ? sorter.field == sortColumnField : !sorter.field && isDefined(sortColumnValue)) &&
+                        (sortColumnField
+                           ? sorter.field == sortColumnField
+                           : !sorter.field && isDefined(sortColumnValue)) &&
                         sorter.value === sortColumnValue;
                      if (sorted) {
                         mods.push("sorted-" + sorter.direction.toLowerCase());
@@ -1494,7 +1516,9 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       let header = column.components[`header${headerLine + 1}`];
 
       let field = column.sortField || column.field;
-      let value = isDefined(column.sortValue) ? column.sortValue : column.value;
+      // precedence: sortValue > sortField > value > field; the comparer prefers value
+      // over field, so value must not be attached when an explicit sortField is set
+      let value = isDefined(column.sortValue) ? column.sortValue : column.sortField ? undefined : column.value;
       let comparer = column.comparer;
       let sortOptions = column.sortOptions;
 

package/src/widgets/index.ts

@@ -1,41 +1,41 @@
-export { Widget } from "../ui/Widget";
-export { Text } from "../ui/Text";
-export { StaticText } from "../ui/StaticText";
-export { PureContainer } from "../ui/PureContainer";
-export { IsolatedScope } from "../ui/IsolatedScope";
-export { DetachedScope } from "../ui/DetachedScope";
-export { Restate, PrivateStore } from "../ui/Restate";
-export { DataProxy } from "../ui/DataProxy";
-export { Content } from "../ui/layout/Content";
-export { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-export { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
-export { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
-export { ContentResolver } from "../ui/ContentResolver";
-export { Rescope } from "../ui/Rescope";
-export { Repeater } from "../ui/Repeater";
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-export * from "./ReactElementWrapper";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
+export { Widget } from "../ui/Widget";
+export { Text } from "../ui/Text";
+export { StaticText } from "../ui/StaticText";
+export { PureContainer } from "../ui/PureContainer";
+export { IsolatedScope } from "../ui/IsolatedScope";
+export { DetachedScope } from "../ui/DetachedScope";
+export { Restate, PrivateStore } from "../ui/Restate";
+export { DataProxy } from "../ui/DataProxy";
+export { Content } from "../ui/layout/Content";
+export { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+export { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
+export { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
+export { ContentResolver } from "../ui/ContentResolver";
+export { Rescope } from "../ui/Rescope";
+export { Repeater } from "../ui/Repeater";
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";

package/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();
       }

package/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,7 +303,17 @@ export class DropdownBase<
   updateDropdownPosition(instance: InstanceType, component: any): void {
     var { el, initialScreenPosition } = component;
     var { data, relatedElement } = instance;
-    var parentBounds = getTopLevelBoundingClientRect(relatedElement!);
+    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
+    //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 (
@@ -291,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,
       );
@@ -334,6 +383,7 @@ export class DropdownBase<
       parentBounds,
       data.placement,
       component.lastPlacement,
+      elDocument,
     );
 
     var arrowAdjust = this.getArrowAdjust(component);
@@ -346,6 +396,7 @@ export class DropdownBase<
       el,
       false,
       arrowAdjust,
+      elDocument,
     );
     component.setCustomStyle(style);
     this.setDirectionClass(component, placement);
@@ -366,6 +417,7 @@ export class DropdownBase<
           el,
           true,
           arrowAdjust,
+          elDocument,
         );
         component.setCustomStyle(newStyle);
       }
@@ -412,8 +464,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    let viewport = getViewportRect(this.screenPadding);
+    let viewport = getViewportRect(this.screenPadding, elDocument);
     style.position = "fixed";
 
     if (placement.startsWith("down")) {
@@ -431,7 +484,7 @@ export class DropdownBase<
           ? Math.max(this.screenPadding, top) + "px"
           : "auto";
       style.bottom =
-        document.documentElement.offsetHeight -
+        elDocument.documentElement.clientHeight -
         (this.cover ? rel.bottom : rel.top) +
         this.offset +
         "px";
@@ -450,7 +503,7 @@ export class DropdownBase<
         break;
 
       case "down-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -466,7 +519,7 @@ export class DropdownBase<
         break;
 
       case "up-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -488,45 +541,45 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `${document.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 = `${document.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 = `${document.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 = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${document.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,
-          document.documentElement.offsetWidth - 2 * this.screenPadding,
+          elDocument.documentElement.clientWidth - 2 * this.screenPadding,
         );
         let h = Math.min(
           contentSize.height,
-          document.documentElement.offsetHeight - 2 * this.screenPadding,
+          elDocument.documentElement.clientHeight - 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`;
+        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;
     }
   }
@@ -539,8 +592,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    var viewport = getViewportRect(this.screenPadding);
+    var viewport = getViewportRect(this.screenPadding, elDocument);
 
     style.position = "absolute";
 
@@ -647,6 +701,7 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
     switch (this.positioning) {
       case "absolute":
@@ -658,6 +713,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
 
@@ -671,6 +727,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         else
           this.applyFixedPositioningPlacementStyles(
@@ -681,6 +738,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         break;
 
@@ -693,6 +751,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
     }
@@ -749,13 +808,14 @@ export class DropdownBase<
     target: any,
     placement: string,
     lastPlacement: any,
+    elDocument: Document,
   ): any {
     var placementOrder = this.placementOrder.split(" ");
     var best = lastPlacement || placement;
     var first;
 
     var score: Record<string, number> = {};
-    var viewport = getViewportRect();
+    var viewport = getViewportRect(0, elDocument);
 
     for (var i = 0; i < placementOrder.length; i++) {
       var p = placementOrder[i];
@@ -970,11 +1030,11 @@ export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
-function getViewportRect(padding = 0) {
+function getViewportRect(padding = 0, elDocument: Document = document) {
   return {
     left: padding,
     top: padding,
-    right: document.documentElement.offsetWidth - padding,
-    bottom: document.documentElement.offsetHeight - padding,
+    right: elDocument.documentElement.clientWidth - padding,
+    bottom: elDocument.documentElement.clientHeight - padding,
   };
 }