[DropdownMenu]: scroll jump issue

[PavelZhuravlev]

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.

<DropdownMenu.Portal/> 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]

@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]

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

[ZaymonFC]

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

[leo-paz]

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]

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

[jackhkmatthewsBB]

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