Merge pull request #195 from primer/special-case-anchored-position-fo…

…r-top-layer-elements

special case anchored-position for top-layer elements

.changeset/clean-hornets-greet.md

@@ -0,0 +1,5 @@
+---
+'@primer/behaviors': patch
+---
+
+Special case anchored-position calls on top-layer elements

src/__tests__/anchored-position.test.ts

@@ -68,6 +68,27 @@ describe('getAnchoredPosition', () => {
     expect(left).toEqual(300)
   })
 
+  it('returns the correct position in the case of top-layer elements', () => {
+    const anchorRect = makeDOMRect(300, 200, 50, 50)
+    const parentRect = makeDOMRect(800, 600, 50, 50)
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100)
+    document.body.innerHTML = '<div><dialog id="float"></dialog><div id="anchor"></div></div>'
+    const parent = document.querySelector('div')!
+    parent.style.overflow = 'hidden'
+    parent.style.position = 'relative'
+    const float = document.querySelector('#float')!
+    const anchor = document.querySelector('#anchor')!
+    parent.getBoundingClientRect = () => parentRect
+    float.getBoundingClientRect = () => floatingRect
+    anchor.getBoundingClientRect = () => anchorRect
+    document.body.getBoundingClientRect = () => makeDOMRect(0, 0, 1920, 0)
+    Object.defineProperty(window, 'innerHeight', {get: () => 1080})
+    const settings: Partial<PositionSettings> = {anchorOffset: 4}
+    const {top, left} = getAnchoredPosition(float, anchor, settings)
+    expect(top).toEqual(254)
+    expect(left).toEqual(300)
+  })
+
   it('returns the correct position in the default case with no overflow, inside a clipping parent', () => {
     const parentRect = makeDOMRect(20, 20, 500, 500)
     const anchorRect = makeDOMRect(300, 200, 50, 50)

src/anchored-position.ts

@@ -169,6 +169,7 @@ export function getAnchoredPosition(
  * position is not "static", or document.body, whichever is closer
  */
 function getPositionedParent(element: Element) {
+  if (isOnTopLayer(element)) return document.body
   let parentNode = element.parentNode
   while (parentNode !== null) {
     if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
@@ -179,6 +180,23 @@ function getPositionedParent(element: Element) {
   return document.body
 }
 
+/**
+ * Returns true if the element is likely to be on the `top-layer`.
+ */
+function isOnTopLayer(element: Element) {
+  if (element.tagName === 'DIALOG') {
+    return true
+  }
+  try {
+    if (element.matches(':popover-open')) {
+      return true
+    }
+  } catch {
+    return false
+  }
+  return false
+}
+
 /**
  * Returns the rectangle (relative to the window) that will clip the given element
  * if it is rendered outside of its bounds.