Utilizing the Popover when the body changes size

[stevegreco]

We are utilizing the Popover to toggle some filters on/off. When the filters are applied, the page size ( document.body ) changes size pretty dramatically. My understanding that because the Popover uses the body to position itself, this might just not work at all.

Our Popover is in a "sticky" header, the basic flow is that a user might scroll 1000px down the page, apply a filter, which in turn reduces the size of the page.

I attached a video here of how this is currently working, but basically the root issue is that the body shrinks down when applying the filter and the positioning of the Popover is then incorrect.

Edit: adding CodeSandbox link. https://codesandbox.io/p/sandbox/agitated-carson-96jpl6

Screen.Recording.2025-11-18.at.4.14.56.PM.mov

[snowystinger]

you could fire a resize event manually, or you can use the prop shouldUpdatePosition https://react-spectrum.adobe.com/react-aria/Popover.html#popover-1

do either of those work for you?

one issue I could see happening though is that with a popover open, you can't scroll. It'd be better probably to put the list into its own scrolling region so it isn't the entire page

[stevegreco]

Yeah shouldUpdatePosition does not seem to do anything, I have not been able to really figure out how that prop works yet.

I do agree that the content should probably be in a scrolling region. Our users are migrating off of HeadlessUI which uses @floating-ui/react which seems to actually anchor the Popover to the trigger element, as opposed to positioning it relative to the document.body. Is there any reason why you all chose to this approach when it comes to positioning the Popover?

[snowystinger]

shouldUpdatePosition looks like it's true by default, but maybe just flipping the value false and back to true is enough to get it to move. I think going with the resize event is probably the better course of action.

I'm not sure I follow when you say that floating-ui is anchored to the trigger instead of the document.body. It looks like they portal somewhere https://headlessui.com/react/popover similar to us? Same thing in BaseUI. I do see an example in Headless 1.7, but it appears that changed in 2.x, and it looks like in 1.7 there was a lot of manual positioning work.

We do this for a number of reasons, probably the biggest reason is so that we can escape stacking contexts, potential overflow hiddens, etc.
This is becoming less of a thing with native popovers and native positioning, which we'll hopefully move to in the near future.
But right now there are still some issues with those. There's more information in some other Issues around our project if you're interested. And there's a little info in our docs here: https://react-spectrum.adobe.com/react-aria/useModalOverlay.html#example

I'm sure if you look in either of those repos you'll see similar discussions as well.

[stevegreco]

Yeah I guess I misspoke, it seems with HeadlessUI at least, the Popover does update its position when the body resizes. Honestly that was kind of my expectation with the shouldUpdatePosition prop, that does not seem to actually do anything.

Shouldn't the Popover be watching for resizes on the element that is positioned relative too, and the updating its position automatically. I guess I am just confused as to what shouldUpdatePosition is actually doing, if not updating the position of the Popover.

[snowystinger]

Shouldn't the Popover be watching for resizes on the element that is positioned relative too

I think this would be a reasonable thing to do. It's likely just an uncommon thing to happen and that's why it hasn't been added yet.