ComboBox Popover doesn't update if Input position changes

[BrianHung]

Provide a general summary of the issue here

ComboBox Popover doesn't update its position when the position of Input changes.

🤔 Expected Behavior?

Popover changes it position to be below input always.

😯 Current Behavior

ComboBox Popover doesn't update its position when the position of Input changes.

💁 Possible Solution

IntersectionObserver between Popover and Input?

🔦 Context

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/black-leaf-n9fqhw

Version

3.35.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[sookmax]

Ha, at first I thought this would be solved with #6396, but just realized this issue could happen when the position (not the size) of the triggerRef (here in Combobox context, input) changes, possibly because of some other layout is shifted.

I'm not sure if IntersectionObserver can be used here since it seems the root element (whose intersection with the target element is checked) must be an ancestor element of the target (ref1, ref2) And the Popover is not a descendant of the Input (it's rendered in a React portal)

One, somewhat (or very), inefficient solution I can think of is to have an animation loop with requestAnimationFrame(), while the popover is open, to monitor the input's dimensions (getBoundingClientRect()) and update the position of the popover when anything changes (maybe we can replace other resize / scroll observers with this single animation loop, but I'm not sure 😅)