Popover not changing position when triggerRef contents change

[eranimo]

Provide a general summary of the issue here

When using Popover by itself with triggerRef, if the bounding box of the trigger changes the popover position does not change.

🤔 Expected Behavior?

The popover should automatically reposition to always be placed correctly when the triggerRef changes

😯 Current Behavior

It does not change position.

💁 Possible Solution

There should be a way to manually trigger a reposition. MutationObserver should be used if it's not already.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/polished-sun-g6c9lh?file=%2Fsrc%2FApp.js%3A31%2C25

Version

Using React-Aria-Components 1.2.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[sookmax]

Maybe we can add the same useResizeOberver() for targetRef as well

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

Lines 189 to 193 in 5cacbdb

	// Update position when the overlay changes size (might need to flip).
	useResizeObserver({
	ref: overlayRef,
	onResize: updatePosition
	});

I did a quick test locally, and it seems to work fine (not sure about the full ramifications of adding it though)

Screen.Recording.2024-05-15.at.11.39.35.PM.mov

[eranimo]

@sookmax That is what MutationObserver was intended to be used for, and I'm frankly surprised this doesn't already handle elements changing. If we're worried about performance, make it an optional prop.

I managed to trigger a reposition myself by toggling the shouldUpdatePosition prop from false and back to true again, which does work but shouldn't be necessary.

Additionally, there should be a way to manually reposition the popover via context or something.

[snowystinger]

Thank you @sookmax , I don't see an issue adding the useResizeObserver. I doubt that the contents would change frequently enough to warrant a performance risk.
Thanks for bringing this to our attention.

[modiho]

I encountered a similar problem where the popover wouldn't reposition itself when the parent element changed position. As suggested by @eranimo I worked around this by toggling shouldUpdatePosition on the same event that triggers the position change of the parent element.
I can try to reproduce this outside of my application if necessary.