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

Popper fails to fit in within available viewport #423

Closed thisisobate closed 2 years ago

thisisobate commented 3 years ago

Reproduction demo

https://codesandbox.io/s/react-popper-dropdown-issue-7g04f

Steps to reproduce the problem

  1. Create a React popper dropdown with nested dropdowns.
  2. Make sure the popper is placed at the bottom of viewports greater than 1440p
  3. Try extending the nested dropdowns and notice how popper vanishes off the screen.

What is the expected behavior?

Popper should extend and fit in within available viewport.

What went wrong?

We use React popper to place elements in different postions within our screen. On hover, react popper shows a dropdown that contains nested dropdowns. If the popper was placed within the lower section of the screen, we notice that extending these dropdowns causes the popper to vanish off the screen. We suspect that the cause of the issue is that popper fails to recalculate its height given the current viewport. We feel its never an issue with placements or data, but with popper's height value.

Any other comments?

Packages versions

ranglang commented 3 years ago

same error

atomiks commented 2 years ago

This is react-popper v1 which hasn't had a bug fix since 2019... Popper v2 was released in January 2020 and doesn't have this issue: https://codesandbox.io/s/react-popper-dropdown-issue-forked-4qebw2

How were you using v1?

atomiks commented 2 years ago

Actually I think you're facing this bug: https://github.com/floating-ui/floating-ui/issues/1404 which is indeed still an issue in Popper v2.

The first (root) menu opens correctly in Popper v2 (unlike v1) but the submenu requires 2 updates. The bug isn't present in Floating UI though.