fix(getContainingBlock): detect top layer elements (#2944)

Co-authored-by: GitHub Actions <github-actions@github.com>

.changeset/calm-rice-refuse.md

@@ -0,0 +1,6 @@
+---
+"@floating-ui/utils": patch
+"@floating-ui/dom": patch
+---
+
+fix(getContainingBlock): detect top layer elements

packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts

@@ -6,11 +6,11 @@ import {
   getNodeScroll,
   isHTMLElement,
   isOverflowElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
 
 import {getBoundingClientRect} from '../utils/getBoundingClientRect';
 import {getScale} from './getScale';
-import {isTopLayer} from '../utils/isTopLayer';
 
 export function convertOffsetParentRelativeRectToViewportRelativeRect({
   elements,

packages/dom/src/platform/getClippingRect.ts

@@ -17,6 +17,7 @@ import {
   isHTMLElement,
   isLastTraversableNode,
   isOverflowElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
 
 import type {Platform, ReferenceElement} from '../types';
@@ -26,7 +27,6 @@ import {getViewportRect} from '../utils/getViewportRect';
 import {getVisualOffsets} from '../utils/getVisualOffsets';
 import {getScale} from './getScale';
 import {isElement} from './isElement';
-import {isTopLayer} from '../utils/isTopLayer';
 
 type PlatformWithCache = Platform & {
   _c: Map<ReferenceElement, Element[]>;

packages/dom/src/platform/getOffsetParent.ts

@@ -8,8 +8,8 @@ import {
   isHTMLElement,
   isLastTraversableNode,
   isTableElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
-import {isTopLayer} from '../utils/isTopLayer';
 import {isStaticPositioned} from '../utils/isStaticPositioned';
 
 type Polyfill = (element: HTMLElement) => Element | null;

packages/dom/test/functional/top-layer.test.ts

@@ -236,3 +236,12 @@ import {click} from './utils/click';
     );
   });
 });
+
+test('fixed inside dialog with outer containing block', async ({page}) => {
+  await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="outer-true"]');
+
+  expect(await page.locator('#outer-dialog').screenshot()).toMatchSnapshot(
+    `top-layer.dialog.outer.png`,
+  );
+});

packages/dom/test/visual/spec/TopLayer.tsx

@@ -1,5 +1,5 @@
 import {useFloating, autoUpdate, flip} from '@floating-ui/react-dom';
-import {useState} from 'react';
+import {useState, useCallback} from 'react';
 
 import {Controls} from '../utils/Controls';
 
@@ -17,6 +17,32 @@ type Props = {
   strategy: 'absolute' | 'fixed';
 };
 
+function OuterTopLayer() {
+  const {refs, floatingStyles} = useFloating({
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const handleDialogRef = useCallback((node: HTMLDialogElement | null) => {
+    if (node) {
+      node.showModal();
+    }
+  }, []);
+
+  return (
+    <>
+      <div style={{containerType: 'inline-size'}}>
+        <dialog id="outer-dialog" ref={handleDialogRef}>
+          <button ref={refs.setReference}>My button</button>
+          <div ref={refs.setFloating} style={floatingStyles}>
+            My tooltip
+          </div>
+        </dialog>
+      </div>
+    </>
+  );
+}
+
 function NotStacked({children}: Props) {
   return children;
 }
@@ -147,6 +173,7 @@ export function TopLayer() {
   const [withMargin, setWithMargin] = useState(false);
   const [layoutStyles, setLayoutStyles] = useState(true);
   const [strategy, setStrategy] = useState<'absolute' | 'fixed'>('fixed');
+  const [outer, setOuter] = useState(false);
 
   const {refs, floatingStyles, x, y} = useFloating({
     strategy,
@@ -194,6 +221,7 @@ export function TopLayer() {
       >
         Top Layer
       </h1>
+      {outer && <OuterTopLayer />}
       <Stack {...stackProps}>
         <div
           className={classes}
@@ -362,6 +390,22 @@ export function TopLayer() {
           </button>
         ))}
       </Controls>
+
+      <h2>outer</h2>
+      <Controls>
+        {BOOLS.map((bool) => (
+          <button
+            key={String(bool)}
+            data-testid={`outer-${bool}`}
+            onClick={() => setOuter(bool)}
+            style={{
+              backgroundColor: bool === outer ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }

packages/utils/src/dom.ts

@@ -58,6 +58,16 @@ export function isTableElement(element: Element): boolean {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 
+export function isTopLayer(element: Element): boolean {
+  return [':popover-open', ':modal'].some((selector) => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+
 export function isContainingBlock(element: Element): boolean {
   const webkit = isWebKit();
   const css = getComputedStyle(element);
@@ -82,6 +92,10 @@ export function getContainingBlock(element: Element): HTMLElement | null {
   let currentNode: Node | null = getParentNode(element);
 
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isTopLayer(currentNode)) {
+      return null;
+    }
+
     if (isContainingBlock(currentNode)) {
       return currentNode;
     }