X position doesn't update when siblings change size

[lewisl9029]

Hi, I just recently started using this library, and really enjoy it so far, but discovered one limitation with it:

https://codesandbox.io/s/fervent-maxwell-c24yg

If you take a look at the above sandbox, and try to type in the input, you'll notice that the x value doesn't get updated straight away. Once you scroll up and down, then it will get updated due to the measurement on scroll.

I'm guessing this might be a limitation of the ResizeObserver API itself? Since the element itself is not resizing?

Any ideas if there might be an API we can use in combination with ResizeObserver to get updates for changes in position?

Thanks!

[eseQ]

Any solution? @lewisl9029 @drcmda

[williaster]

+1, we've also hit the limitation where the measured element's bounds don't update when some type of page flow change affects its position. See here https://codesandbox.io/s/frosty-rain-l90dn?file=/src/index.tsx

@drcmda have you thought about this challenge much? Would be amazing to be able to detect when an element's position changes, doing this with IntersectionObserver seems tricky but might be possible.

[charkour]

Hey, this is a late response. Ran into the same limitation as @lewisl9029 and @williaster did. Was able to get the x position to update correctly by adding a React.createRef to the element and then used ref.current.getBoundingClientRect().x to get the correctly updating position when the sibling size changes.

Looking at the internal code of this lib, not sure why this is a bug, maybe because the call to getBoundingClientRect is memoized.