fix: top layer elements with absolute strategy (#2786)

Co-authored-by: GitHub Actions <github-actions@github.com>
floating-ui · Feb 11, 2024 · f87487e · f87487e
1 parent 86526a7
commit f87487e
Show file tree

Hide file tree

Showing 41 changed files with 296 additions and 268 deletions.
diff --git a/.changeset/old-turkeys-allow.md b/.changeset/old-turkeys-allow.md
@@ -0,0 +1,5 @@
+---
+"@floating-ui/dom": patch
+---
+
+fix: top layer element positioning and collision detection when using `absolute` strategy
diff --git a/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts b/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts
@@ -10,27 +10,24 @@ import {
 
 import {getBoundingClientRect} from '../utils/getBoundingClientRect';
 import {getScale} from './getScale';
-import type {Platform} from '../types';
-import {topLayer} from '../utils/topLayer';
+import {isTopLayer} from '../utils/isTopLayer';
 
-export function convertOffsetParentRelativeRectToViewportRelativeRect(
-  this: Platform,
-  {
-    elements,
-    rect,
-    offsetParent,
-    strategy,
-  }: {
-    elements?: Elements;
-    rect: Rect;
-    offsetParent: Element | Window;
-    strategy: Strategy;
-  },
-): Rect {
+export function convertOffsetParentRelativeRectToViewportRelativeRect({
+  elements,
+  rect,
+  offsetParent,
+  strategy,
+}: {
+  elements?: Elements;
+  rect: Rect;
+  offsetParent: Element | Window;
+  strategy: Strategy;
+}): Rect {
+  const isFixed = strategy === 'fixed';
   const documentElement = getDocumentElement(offsetParent);
-  const [isTopLayer] = elements ? topLayer(elements.floating) : [false];
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
 
-  if (offsetParent === documentElement || isTopLayer) {
+  if (offsetParent === documentElement || (topLayer && isFixed)) {
     return rect;
   }
 
@@ -39,10 +36,7 @@ export function convertOffsetParentRelativeRectToViewportRelativeRect(
   const offsets = createCoords(0);
   const isOffsetParentAnElement = isHTMLElement(offsetParent);
 
-  if (
-    isOffsetParentAnElement ||
-    (!isOffsetParentAnElement && strategy !== 'fixed')
-  ) {
+  if (isOffsetParentAnElement || (!isOffsetParentAnElement && !isFixed)) {
     if (
       getNodeName(offsetParent) !== 'body' ||
       isOverflowElement(documentElement)

diff --git a/packages/dom/src/platform/getElementRects.ts b/packages/dom/src/platform/getElementRects.ts
@@ -13,7 +13,6 @@ export const getElementRects: Platform['getElementRects'] = async function (
       data.reference,
       await getOffsetParentFn(data.floating),
       data.strategy,
-      data.floating,
     ),
     floating: {x: 0, y: 0, ...(await getDimensionsFn(data.floating))},
   };

diff --git a/packages/dom/src/platform/getOffsetParent.ts b/packages/dom/src/platform/getOffsetParent.ts
@@ -7,6 +7,7 @@ import {
   isHTMLElement,
   isTableElement,
 } from '@floating-ui/utils/dom';
+import {isTopLayer} from '../utils/isTopLayer';
 
 type Polyfill = (element: HTMLElement) => Element | null;
 
@@ -36,7 +37,7 @@ export function getOffsetParent(
 ): Element | Window {
   const window = getWindow(element);
 
-  if (!isHTMLElement(element)) {
+  if (!isHTMLElement(element) || isTopLayer(element)) {
     return window;
   }
 

diff --git a/packages/dom/src/utils/getRectRelativeToOffsetParent.ts b/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
@@ -10,13 +10,11 @@ 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);
@@ -48,20 +46,8 @@ 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;
-    }
-  }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
 
   return {
     x,

diff --git a/packages/dom/src/utils/isTopLayer.ts b/packages/dom/src/utils/isTopLayer.ts
@@ -0,0 +1,11 @@
+const topLayerSelectors = [':popover-open', ':modal'] as const;
+
+export function isTopLayer(floating: HTMLElement) {
+  return topLayerSelectors.some((selector) => {
+    try {
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
diff --git a/packages/dom/src/utils/topLayer.ts b/packages/dom/src/utils/topLayer.ts