react-aria Popover does not overlay trigger element when placement is bottom

[obaida-adi]

Provide a general summary of the issue here

When a react-aria popover is triggered, the overlay section does not overlay the trigger element when the placement is bottom.

🤔 Expected Behavior?

I expect the behavior to be the same with top and bottom placement. Note the following screenshots where we see a difference in behaviour when placement is top and when placement is bottom.

Top placement:

Bottom placement:

😯 Current Behavior

Currently, the overlay does not overlay the trigger element when placement is bottom.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

import {
	Popover,
	Dialog,
	DialogTrigger,
	OverlayArrow,
} from "react-aria-components";

// Defn
function BasePopover({ children }: BasePopoverProps) {
        return (
        <Popover offset={12} containerPadding={8}>
        	<OverlayArrow>
        		<svg ... ></svg>
        	</OverlayArrow>
        	<div>{children}</div>
        </Popover>
        );
}

function Popover({ children }: PopoverProps) {
	return (
		<BasePopover>
			<Dialog>{children}</Dialog>
		</BasePopover>
	);
}

const PopoverTrigger = DialogTrigger;

// Usage
 <PopoverTrigger>
     <Button>Open Popover</Button>
     <Popover>
           <p>Content</p>
     </Popover>
 </PopoverTrigger>

Version

react-aria-components: 1.5.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

Unfortunately I cant replicate your screenshots given the instructions you have in the report.

From what I see, your Popover example with placement top appears to be colliding with the top of the viewport, causing it to offset the popover downwards. This is intended behavior and part of what react-aria does to increase content visibility.

I hope this helps 👍

[obaida-adi]

Unfortunately I cant replicate your screenshots given the instructions you have in the report.

From what I see, your Popover example with placement top appears to be colliding with the top of the viewport, causing it to offset the popover downwards. This is intended behavior and part of what react-aria does to increase content visibility.

I hope this helps 👍

@nwidynski Yup, that's totally expected. My question is, shouldn't it do the same if it collides with the bottom of the viewport?

[LFDanLu]

@obaida-adi Mind providing a stackblitz? Just want to be absolutely sure I'm reproducing the same thing locally when debugging.

My question is, shouldn't it do the same if it collides with the bottom of the viewport?

Yep, theoretically it should since your overlay has a fixed height and should be the responsibility of this portion of the code if I remember correctly:

react-spectrum/packages/@react-aria/overlays/src/calculatePosition.ts

Lines 186 to 194 in cdba748

	// If any of the overlay edges falls outside of the boundary, shift the overlay the required amount to align one of the overlay's
	// edges with the closest boundary edge.
	if (startEdgeOffset < boundaryStartEdge) {
	return boundaryStartEdge - startEdgeOffset;
	} else if (endEdgeOffset > boundaryEndEdge) {
	return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
	} else {
	return 0;
	}