React-popper: Changing Reference Size doesn't recalculate Popper position

[Argonanth]

I'm not sure if this is something that can be easily done and I'm just missing something, but wouldn't this make sense to happen automatically? I would assume I need to call scheduleUpdate on the PopperProps, although I'm not sure how to call that from the reference.

Reproduction demo

https://codesandbox.io/s/yvr9py6x4x

Steps to reproduce the problem

1. Change size of reference element after the Popper is visible and positioned

What is the expected behavior?

Popper should recalculate it's position.

What went wrong?

Popper doesn't move.

Any other comments?

Packages versions

• Popper.js: according to my package-lock it's 1.14.6?
• react-popper: 1.3.3

[FezVrasta]

You have to call scheduleUpdate when you want to re-position a popper for whatever reason (non related to scroll or window resize events).

https://codesandbox.io/s/548qz1054k

If you need to access scheduleUpdate outside the Popper context you may use React.useRef() to save a reference of it, it's not very nice but I can't think of a better alternative if the constraints are that.

[designbyadrian]

@FezVrasta any way of implementing this solution like they did in Semantic UI? https://github.com/Semantic-Org/Semantic-UI-React/pull/3657

[FezVrasta]

@designbyadrian from what I see that wouldn't address the OP issue?

[designbyadrian]

@FezVrasta they would be able to pass the dimensions as a variable, which, when changed, will trigger the update. The parent component can keep the size of the reference element in its state.

The solution in 3657 can be used like so:

 <Popup popperDependencies={[width, height]} />

Currently, there is no way for a parent component to tell the popper to update.