fix(overlayposition): check if overlay is overflowing relativeElement

Author: felixfbecker

src/overlay_position.test.ts

@@ -110,28 +110,53 @@ describe('overlay_position', () => {
             beforeEach(() => {
                 relativeElement.style.height = '600px'
                 relativeElement.style.overflow = 'auto'
+            })
+            describe('not scrolled', () => {
+                beforeEach(() => {
+                    const content = document.createElement('div')
+                    content.style.height = '500px'
+                    content.style.width = '700px'
+                    relativeElement.appendChild(content)
+                })
 
-                const content = document.createElement('div')
-                content.style.height = '3000px'
-                content.style.width = '3000px'
-                relativeElement.appendChild(content)
+                it('should return a position above the given target if the overlay fits above', () => {
+                    const target = createTarget({ left: 100, top: 200 })
+                    const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
+                    applyOffsets(hoverOverlayElement, position)
+                    assert.deepStrictEqual(position, { left: 100, top: 50 })
+                })
 
-                relativeElement.scrollTop = 400
-                relativeElement.scrollLeft = 200
+                it('should return a position below the a given target if the overlay does not fit above', () => {
+                    const target = createTarget({ left: 100, top: 140 })
+                    const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
+                    applyOffsets(hoverOverlayElement, position)
+                    assert.deepStrictEqual(position, { left: 100, top: 156 })
+                })
             })
+            describe('scrolled', () => {
+                beforeEach(() => {
+                    const content = document.createElement('div')
+                    content.style.height = '3000px'
+                    content.style.width = '3000px'
+                    relativeElement.appendChild(content)
 
-            it('should return a position above the given target if the overlay fits above', () => {
-                const target = createTarget({ left: 300, top: 600 })
-                const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
-                applyOffsets(hoverOverlayElement, position)
-                assert.deepStrictEqual(position, { left: 300, top: 450 })
-            })
+                    relativeElement.scrollTop = 400
+                    relativeElement.scrollLeft = 200
+                })
 
-            it('should return a position below the a given target if the overlay does not fit above', () => {
-                const target = createTarget({ left: 300, top: 450 })
-                const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
-                applyOffsets(hoverOverlayElement, position)
-                assert.deepStrictEqual(position, { left: 300, top: 466 })
+                it('should return a position above the given target if the overlay fits above', () => {
+                    const target = createTarget({ left: 300, top: 600 })
+                    const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
+                    applyOffsets(hoverOverlayElement, position)
+                    assert.deepStrictEqual(position, { left: 300, top: 450 })
+                })
+
+                it('should return a position below the a given target if the overlay does not fit above', () => {
+                    const target = createTarget({ left: 300, top: 450 })
+                    const position = calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
+                    applyOffsets(hoverOverlayElement, position)
+                    assert.deepStrictEqual(position, { left: 300, top: 466 })
+                })
             })
         })
     })

src/overlay_position.ts

@@ -1,4 +1,4 @@
-interface CalculateOverlayPositionOptions {
+export interface CalculateOverlayPositionOptions {
     /** The closest parent element that is `position: relative` */
     relativeElement: HTMLElement
     /** The DOM Node that was hovered */
@@ -31,8 +31,8 @@ export const calculateOverlayPosition = ({
     const relativeHoverOverlayLeft = targetBounds.left + relativeElement.scrollLeft - relativeElementBounds.left
 
     let relativeHoverOverlayTop: number
-    // If the top of the hover overlay would be outside of the viewport (top negative)
-    if (targetBounds.top - hoverOverlayBounds.height < 0) {
+    // Check if the top of the hover overlay would be outside of the relative element or the viewport
+    if (targetBounds.top - hoverOverlayBounds.height < Math.max(relativeElementBounds.top, 0)) {
         // Position it below the target
         // If the relativeElement is scrolled, we need to account for the offset (if not scrollTop will be 0)
         relativeHoverOverlayTop = targetBounds.bottom - relativeElementBounds.top + relativeElement.scrollTop