search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.87k stars 722 forks source link

[DropdownMenu]: scroll jump issue #2331

Closed PavelZhuravlev closed 4 months ago

PavelZhuravlev commented 11 months ago

Bug report

Current Behavior

If the DropdownMenu is located within a parent container that has the transform property (regardless of the specific value), when the menu is opened, the scroll position jumps to the beginning of the page, and the menu remains off-screen.

https://github.com/radix-ui/primitives/assets/14184094/7e85d9c8-d7d0-44e6-bbbe-26eeacb31293

Expected behavior

Regardless of the parent's properties, the menu should function correctly

https://github.com/radix-ui/primitives/assets/14184094/0ef756cd-55d6-48b6-9c74-effcc544c3bb

Reproducible example

Demo

Additional context

The issue persists even with modal={true}, which should prevent scrolling. The scroll still jumps to the beginning of the page and then becomes locked.

hides the issue, but I don't think it's appropriate to consider this as a solution. I believe the menu should function correctly even without a portal.

relates to: https://github.com/radix-ui/primitives/issues/1688

Your environment

Software Name(s) Version
Radix Package(s) "@radix-ui/react-dropdown-menu": "^2.0.5",
React n/a
Browser
Assistive tech
Node n/a
npm/yarn
Operating System
GheorgheP commented 6 months ago

@PavelZhuravlev, having the same issue.

And I confirm that the <DropdownMenu.Portal/> does hide the problem, but in my case the portal sgould bound to a specific container and it got in is trapped in the transform too.

devjones commented 4 months ago

I was able to solve this by setting modal={false} on the root DropdownMenu component. The default is true.

ZaymonFC commented 3 months ago

I'm also experiencing this issue with the latest RC of the Popover component.

leo-paz commented 2 months ago

I was able to solve this by setting modal={false} on the root DropdownMenu component. The default is true.

In my case my dropdown menu was in an absolutely positioned element that was causing the portal to not render in the proper place. Using modal={false} fixed it for me

EDIT: The content of the dropdown was displaying correctly but when trying to hover over it the same problem happened.

https://github.com/radix-ui/primitives/assets/26093865/f9ef29c5-c190-4005-861f-a0eb4aea2c63

brunocabral88 commented 1 month ago

I was having the same issue but it was fixed when I upgraded to 2.0.7-rc.10 🎉

jackhkmatthewsBB commented 3 weeks ago

For me this was being caused by overflow-y: scroll on body