search

floating-ui / react-popper

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

Nested poppers using portals not updating position #412

Closed zbrogz closed 3 years ago

zbrogz commented 3 years ago

Reproduction demo

https://codesandbox.io/s/nostalgic-hugle-9n0ns?file=/src/Menu.js

Steps to reproduce the problem

  1. Scroll down to the first reference element, "menu anchor"
  2. Click on "menu anchor" to open the first popper
  3. Click on "first submenu anchor" to open the next popper
  4. Scroll the page and the nested popper's position does not update with it's reference element ("first submenu anchor")

What is the expected behavior?

The nested poppers' position should update with the reference element as the page is scrolled.

What went wrong?

Removing position: absolute or overflow: scroll from the parent div is a workaround.

Any other comments?

It's likely that this is an issue with @popperjs/core, not react-popper.

Kapture 2021-03-24 at 17 39 47

Package versions

FezVrasta commented 3 years ago

The issue seems indeed to be on @popperjs/core, could you open an issue there and update the example to not use any 3rd party dependency (such as React or react-popper)? Thanks