fix: CSS :top-layer elements inside containing blocks (#2747)

.changeset/sharp-donkeys-enjoy.md

@@ -0,0 +1,8 @@
+---
+'@floating-ui/core': minor
+'@floating-ui/dom': minor
+---
+
+fix: handle CSS `:top-layer` elements inside containing blocks. It's no longer
+necessary to implement the middleware workaround outlined in
+https://github.com/floating-ui/floating-ui/issues/1842#issuecomment-1872653245.

packages/core/src/detectOverflow.ts

@@ -92,6 +92,7 @@ export async function detectOverflow(
   const elementClientRect = rectToClientRect(
     platform.convertOffsetParentRelativeRectToViewportRelativeRect
       ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+          elements,
           rect,
           offsetParent,
           strategy,

packages/core/src/types.ts

@@ -37,6 +37,7 @@ export interface Platform {
 
   // Optional
   convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
+    elements?: Elements;
     rect: Rect;
     offsetParent: any;
     strategy: Strategy;

packages/dom/src/platform.ts

@@ -10,7 +10,7 @@ import {isElement} from './platform/isElement';
 import {isRTL} from './platform/isRTL';
 import type {Platform} from './types';
 
-export const platform: Required<Platform> = {
+export const platform: Platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
   getDocumentElement,
   getClippingRect,

packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts

@@ -1,4 +1,4 @@
-import type {Rect, Strategy} from '@floating-ui/core';
+import type {Elements, Rect, Strategy} from '@floating-ui/core';
 import {createCoords} from '@floating-ui/utils';
 import {
   getDocumentElement,
@@ -10,26 +10,34 @@ import {
 
 import {getBoundingClientRect} from '../utils/getBoundingClientRect';
 import {getScale} from './getScale';
+import type {Platform} from '../types';
+import {topLayer} from '../utils/topLayer';
 
-export function convertOffsetParentRelativeRectToViewportRelativeRect({
-  rect,
-  offsetParent,
-  strategy,
-}: {
-  rect: Rect;
-  offsetParent: Element | Window;
-  strategy: Strategy;
-}): Rect {
-  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+export function convertOffsetParentRelativeRectToViewportRelativeRect(
+  this: Platform,
+  {
+    elements,
+    rect,
+    offsetParent,
+    strategy,
+  }: {
+    elements?: Elements;
+    rect: Rect;
+    offsetParent: Element | Window;
+    strategy: Strategy;
+  },
+): Rect {
   const documentElement = getDocumentElement(offsetParent);
+  const [isTopLayer] = elements ? topLayer(elements.floating) : [false];
 
-  if (offsetParent === documentElement) {
+  if (offsetParent === documentElement || isTopLayer) {
     return rect;
   }
 
   let scroll = {scrollLeft: 0, scrollTop: 0};
   let scale = createCoords(1);
   const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
 
   if (
     isOffsetParentAnElement ||

packages/dom/src/platform/getElementRects.ts

@@ -4,16 +4,17 @@ import {getOffsetParent} from './getOffsetParent';
 
 export const getElementRects: Platform['getElementRects'] = async function (
   this: Platform,
-  {reference, floating, strategy},
+  data,
 ) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
   return {
     reference: getRectRelativeToOffsetParent(
-      reference,
-      await getOffsetParentFn(floating),
-      strategy,
+      data.reference,
+      await getOffsetParentFn(data.floating),
+      data.strategy,
+      data.floating,
     ),
-    floating: {x: 0, y: 0, ...(await getDimensionsFn(floating))},
+    floating: {x: 0, y: 0, ...(await getDimensionsFn(data.floating))},
   };
 };

packages/dom/src/types.ts

@@ -42,20 +42,21 @@ export interface Platform {
   getDimensions: (element: Element) => Promisable<Dimensions>;
 
   // Optional
-  convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
+  convertOffsetParentRelativeRectToViewportRelativeRect: (args: {
+    elements?: Elements;
     rect: Rect;
     offsetParent: Element;
     strategy: Strategy;
   }) => Promisable<Rect>;
-  getOffsetParent?: (
+  getOffsetParent: (
     element: Element,
     polyfill?: (element: HTMLElement) => Element | null,
   ) => Promisable<Element | Window>;
-  isElement?: (value: unknown) => Promisable<boolean>;
-  getDocumentElement?: (element: Element) => Promisable<HTMLElement>;
-  getClientRects?: (element: Element) => Promisable<Array<ClientRectObject>>;
-  isRTL?: (element: Element) => Promisable<boolean>;
-  getScale?: (element: HTMLElement) => Promisable<{x: number; y: number}>;
+  isElement: (value: unknown) => Promisable<boolean>;
+  getDocumentElement: (element: Element) => Promisable<HTMLElement>;
+  getClientRects: (element: Element) => Promisable<Array<ClientRectObject>>;
+  isRTL: (element: Element) => Promisable<boolean>;
+  getScale: (element: HTMLElement) => Promisable<{x: number; y: number}>;
 }
 
 export interface NodeScroll {

packages/dom/src/utils/getRectRelativeToOffsetParent.ts

@@ -10,11 +10,13 @@ import {
 import {getDocumentElement} from '../platform/getDocumentElement';
 import {getBoundingClientRect} from './getBoundingClientRect';
 import {getWindowScrollBarX} from './getWindowScrollBarX';
+import {topLayer} from './topLayer';
 
 export function getRectRelativeToOffsetParent(
   element: Element | VirtualElement,
   offsetParent: Element | Window,
   strategy: Strategy,
+  floating: HTMLElement,
 ): Rect {
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
   const documentElement = getDocumentElement(offsetParent);
@@ -46,9 +48,24 @@ export function getRectRelativeToOffsetParent(
     }
   }
 
+  let x = rect.left + scroll.scrollLeft - offsets.x;
+  let y = rect.top + scroll.scrollTop - offsets.y;
+
+  const [isTopLayer, topLayerX, topLayerY] = topLayer(floating);
+
+  if (isTopLayer) {
+    x += topLayerX;
+    y += topLayerY;
+
+    if (isOffsetParentAnElement) {
+      x += offsetParent.clientLeft;
+      y += offsetParent.clientTop;
+    }
+  }
+
   return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
+    x,
+    y,
     width: rect.width,
     height: rect.height,
   };

packages/dom/src/utils/topLayer.ts

@@ -0,0 +1,29 @@
+import {getContainingBlock} from '@floating-ui/utils/dom';
+
+const topLayerSelectors = [':popover-open', ':modal'] as const;
+
+export function topLayer(floating: HTMLElement) {
+  let isTopLayer = false;
+  let x = 0;
+  let y = 0;
+
+  function setIsTopLayer(selector: (typeof topLayerSelectors)[number]) {
+    try {
+      isTopLayer = isTopLayer || floating.matches(selector);
+    } catch (e) {}
+  }
+
+  topLayerSelectors.forEach((selector) => {
+    setIsTopLayer(selector);
+  });
+
+  const containingBlock = getContainingBlock(floating);
+
+  if (isTopLayer && containingBlock) {
+    const rect = containingBlock.getBoundingClientRect();
+    x = rect.x;
+    y = rect.y;
+  }
+
+  return [isTopLayer, x, y] as const;
+}

packages/dom/test/functional/autoUpdate.test.ts

@@ -35,7 +35,7 @@ import {click} from './utils/click';
   });
 });
 
-test.only(`reactive whileElementsMounted`, async ({page}) => {
+test(`reactive whileElementsMounted`, async ({page}) => {
   await page.goto('http://localhost:1234/autoUpdate');
 
   // option is `false` on mount by default, so test that changing it to `true`