fix: handle self-transform styles

floating-ui · Jan 25, 2024 · a87795d · a87795d
1 parent 6304e34
commit a87795d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/packages/dom/src/utils/topLayer.ts b/packages/dom/src/utils/topLayer.ts
@@ -1,4 +1,4 @@
-import {getContainingBlock, isContainingBlock} from '@floating-ui/utils/dom';
+import {getContainingBlock} from '@floating-ui/utils/dom';
 
 const topLayerSelectors = [':popover-open', ':modal'] as const;
 
@@ -7,19 +7,17 @@ export function topLayer(floating: HTMLElement) {
   let x = 0;
   let y = 0;
 
-  function setTopLayer(selector: (typeof topLayerSelectors)[number]) {
+  function setIsTopLayer(selector: (typeof topLayerSelectors)[number]) {
     try {
       isTopLayer = isTopLayer || floating.matches(selector);
     } catch (e) {}
   }
 
   topLayerSelectors.forEach((selector) => {
-    setTopLayer(selector);
+    setIsTopLayer(selector);
   });
 
-  const containingBlock = isContainingBlock(floating)
-    ? floating
-    : getContainingBlock(floating);
+  const containingBlock = getContainingBlock(floating);
 
   if (isTopLayer && containingBlock) {
     const rect = containingBlock.getBoundingClientRect();

diff --git a/packages/dom/test/functional/top-layer.test.ts b/packages/dom/test/functional/top-layer.test.ts
@@ -171,3 +171,25 @@ test('containing block margins', async ({page}) => {
     `top-layer.containing-block-margin.png`,
   );
 });
+
+test('non-layout styles', async ({page}) => {
+  await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="layoutStyles-false"]');
+  await click(page, '#reference');
+
+  expect(await page.locator('.host').screenshot()).toMatchSnapshot(
+    `top-layer.non-layout-styles.png`,
+  );
+});
+
+test('non-layout styles, dialog', async ({page}) => {
+  await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="layoutStyles-false"]');
+  await click(page, `[data-testid="stackedOn-dialog"]`);
+  await click(page, '#stack');
+  await click(page, '#reference');
+
+  expect(await page.locator('.host').screenshot()).toMatchSnapshot(
+    `top-layer.non-layout-styles.png`,
+  );
+});
diff --git a/packages/dom/test/visual/spec/TopLayer.tsx b/packages/dom/test/visual/spec/TopLayer.tsx
@@ -144,8 +144,9 @@ export function TopLayer() {
   const [stackedOn, setStackedOn] = useState<STACKED_TYPES>('none');
   const [collision, setCollision] = useState(false);
   const [withMargin, setWithMargin] = useState(false);
+  const [layoutStyles, setLayoutStyles] = useState(false);
 
-  const {x, y, strategy, refs} = useFloating({
+  const {refs, floatingStyles, x, y} = useFloating({
     whileElementsMounted: autoUpdate,
     placement: 'top',
     strategy: 'fixed',
@@ -230,9 +231,13 @@ export function TopLayer() {
             style={{
               ...tooltipStyles,
               display: 'revert',
-              position: strategy,
-              top: y,
-              left: x,
+              ...(layoutStyles
+                ? {
+                    position: 'fixed',
+                    top: y,
+                    left: x,
+                  }
+                : floatingStyles),
               ...(collision && {
                 height: 100,
               }),
@@ -243,6 +248,22 @@ export function TopLayer() {
         </div>
       </Stack>
 
+      <h2>Layout styles</h2>
+      <Controls>
+        {BOOLS.map((bool) => (
+          <button
+            key={String(bool)}
+            data-testid={`layoutStyles-${bool}`}
+            onClick={() => setLayoutStyles(bool)}
+            style={{
+              backgroundColor: bool === layoutStyles ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
+
       <h2>Collision</h2>
       <Controls>
         {BOOLS.map((bool) => (