search

floating-ui / react-popper

🍿⚛Official React library to use Popper, the positioning library
https://popper.js.org/react-popper/
MIT License
2.5k stars 226 forks source link

usePopper: changes in strategy puts the popper in a incorrect position #381

Open dfernandez-asapp opened 4 years ago

dfernandez-asapp commented 4 years ago

Reproduction demo

https://codesandbox.io/s/condescending-mendel-bo6hp?file=/src/App.tsx

Steps to reproduce the problem

  1. Pass a strategy value to usePopper that depends on a property or state
  2. Switch the strategy value from 'fixed' to 'absolute' and viceversa
  3. Now the popper is incorrectly positioned, even if you go back to the previous strategy value.

What is the expected behavior?

Changes in strategy should keep the popper visually positioned in the same place.

What went wrong?

The changes in strategy are not correctly reflected.

Any other comments?

I think that a possible cause of this bug may be here: https://github.com/popperjs/react-popper/blob/master/src/usePopper.js#L117

Because popperOptions is not one of the effect dependencies.

Packages versions

dfernandez-asapp commented 4 years ago

About my comment on the possible cause. That's not the issue, there is another effect a few lines up that does a setOptions. I checked with the debugger and the options are updated, but for some reason the positioning is wrong after an strategy update.