adobe
ComboBox Popover doesn't update if Input position changes
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
Ha, at first I thought this would be solved with https://github.com/adobe/react-spectrum/pull/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 😅)
