cx 26.2.1 → 26.2.3

package/src/widgets/overlay/Dropdown.tsx

@@ -6,7 +6,13 @@ import { calculateNaturalElementHeight } from "../../util/calculateNaturalElemen
 import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
-import { Overlay, OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import {
+  ConfigureOverlayContainerContext,
+  Overlay,
+  OverlayBase,
+  OverlayConfig,
+  OverlayInstance,
+} from "./Overlay";
 import { Instance } from "../../ui/Instance";
 import { StringProp } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
@@ -19,714 +25,883 @@ 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;
 
-   /** 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 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);
-   }
-
-   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 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);
+  }
+
+  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;
-   }
-
-   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);
-
-      this.applyPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, false);
-      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);
-            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();
-   }
-
-   applyFixedPositioningPlacementStyles(
-      style: any,
-      placement: string,
-      contentSize: any,
-      rel: any,
-      el: HTMLElement,
-      noAuto: boolean,
-   ): 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}px`;
-            break;
-
-         case "down-left":
-            style.right = `${document.documentElement.offsetWidth - rel.right}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}px`;
-            break;
-
-         case "up-left":
-            style.right = `${document.documentElement.offsetWidth - rel.right}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}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}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}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}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,
-   ): 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 = `0`;
-            break;
-
-         case "down-left":
-            style.right = `0`;
-            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 = `0`;
-            break;
-
-         case "up-left":
-            style.right = `0`;
-            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 = `0`;
-            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 = `0`;
-            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 = `0`;
-            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 = `0`;
-            style.left = "auto";
-            break;
-      }
-   }
-
-   applyPositioningPlacementStyles(
-      style: any,
-      placement: string,
-      contentSize: any,
-      parentBounds: any,
-      el: HTMLElement,
-      noAuto: boolean,
-   ): void {
-      switch (this.positioning) {
-         case "absolute":
-            this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            break;
-
-         case "auto":
-            if (isTouchDevice())
-               this.applyAbsolutePositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            else this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            break;
-
-         default:
-            this.applyFixedPositioningPlacementStyles(style, placement, contentSize, parentBounds, el, noAuto);
-            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,
+    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);
       });
-   }
-
-   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): 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);
-               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;
-         }
+      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,
+    );
+
+    this.applyPositioningPlacementStyles(
+      style,
+      placement,
+      contentSize,
+      parentBounds,
+      el,
+      false,
+    );
+    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,
+        );
+        component.setCustomStyle(newStyle);
       }
-
-      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 (!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();
+  }
+
+  applyFixedPositioningPlacementStyles(
+    style: any,
+    placement: string,
+    contentSize: any,
+    rel: any,
+    el: HTMLElement,
+    noAuto: boolean,
+  ): 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}px`;
+        break;
+
+      case "down-left":
+        style.right = `${document.documentElement.offsetWidth - rel.right}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}px`;
+        break;
+
+      case "up-left":
+        style.right = `${document.documentElement.offsetWidth - rel.right}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}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}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}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}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,
+  ): 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 = `0`;
+        break;
+
+      case "down-left":
+        style.right = `0`;
+        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 = `0`;
+        break;
+
+      case "up-left":
+        style.right = `0`;
+        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 = `0`;
+        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 = `0`;
+        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 = `0`;
+        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 = `0`;
+        style.left = "auto";
+        break;
+    }
+  }
+
+  applyPositioningPlacementStyles(
+    style: any,
+    placement: string,
+    contentSize: any,
+    parentBounds: any,
+    el: HTMLElement,
+    noAuto: boolean,
+  ): void {
+    switch (this.positioning) {
+      case "absolute":
+        this.applyAbsolutePositioningPlacementStyles(
+          style,
+          placement,
+          contentSize,
+          parentBounds,
+          el,
+          noAuto,
+        );
+        break;
+
+      case "auto":
+        if (isTouchDevice())
+          this.applyAbsolutePositioningPlacementStyles(
+            style,
+            placement,
+            contentSize,
+            parentBounds,
+            el,
+            noAuto,
+          );
+        else
+          this.applyFixedPositioningPlacementStyles(
+            style,
+            placement,
+            contentSize,
+            parentBounds,
+            el,
+            noAuto,
+          );
+        break;
+
+      default:
+        this.applyFixedPositioningPlacementStyles(
+          style,
+          placement,
+          contentSize,
+          parentBounds,
+          el,
+          noAuto,
+        );
+        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,
+  ): 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,
+            );
+          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;
       }
 
-      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;
+      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;
       }
-      return super.getOverlayContainer();
-   }
+    }
+
+    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;
@@ -753,10 +928,10 @@ 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,
-   };
+  return {
+    left: padding,
+    top: padding,
+    right: document.documentElement.offsetWidth - padding,
+    bottom: document.documentElement.offsetHeight - padding,
+  };
 }