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
15.84k stars 821 forks source link

[DropdownMenu] dropdown menu scrolls on hover #1566

Closed misha-erm closed 5 months ago

misha-erm commented 2 years ago

Bug report

Current Behavior

When I hover last/first visible item in dropdown menu content it autoscrolls to some random element

https://user-images.githubusercontent.com/8783498/180736094-2052435d-9f1d-4ae8-aa4d-2096701515fc.mov

Expected behavior

DropdownMenu.Content should not scroll on item hover

Reproducible example

CodeSandbox Template

Suggested solution

Additional context

Keyboard navigation feels a bit awkward too. Seems like it tries to keep focused element in the center of the list and those jumps are bit weird

Seems to be reproducible on both versions 0.1.6 and 1.0.0

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-dropdown-menu 1.0.0
React n/a 16.14
Browser Brave Version 1.40.113 Chromium: 103.0.5060.114 (Official Build) (x86_64)
Assistive tech
Node n/a
npm/yarn
Operating System MacOs 12.4
andy-hook commented 2 years ago

Hey @MikeYermolayev curious on your use case for an overflow scroll on the dropdown? unlike Select, dropdown menu doesn't have first class support for it.

misha-erm commented 2 years ago

Right now I can imagine 3 cases where we use dropdowns and the list can get long enough:

  1. language selector in code editor block. Here it should be definitely replaced with Select, thank you. Somehow we missed existence of radix select component 😅
  2. 'Add block' dropdown menu. Currently it doesn't have a lot of blocks but it definitely will one day so we should restrict max-height for this one. For example Notion's 'add block' menu has a plenty of items image
  3. We have a concept of automations and custom actions/buttons, so the list of actions in that case can get long enough too image
andy-hook commented 2 years ago

Thanks for that @MikeYermolayev, makes sense and sounds sensible. Looks like the main jank is related to browser scroll behaviour when focus is changing. We should look into how to improve this for dropdown as we have for select

clearly-outsane commented 1 year ago

What if you use a radix scroll area instead?

hipstersmoothie commented 1 year ago

The sub menu scrolling with the trigger is also a problem IMO

misha-erm commented 1 year ago

Just want to share one more case where I faced this problem again...

The issue becomes more critical when the dropdown is placed above the trigger because first interaction with the menu causes ui jumps

https://github.com/radix-ui/primitives/assets/8783498/9e0f541d-87b0-4ab5-8524-5cc7f86ba070

nina-loet commented 9 months ago

Any progress on this bug? I am experiencing this as well and would love to know if a fix is planned.

cpmsmith commented 9 months ago

@nina-loet I've got a PR open which fixes it (https://github.com/radix-ui/primitives/pull/2451), but it looks like Radix haven't been reviewing incoming PRs lately.

pozdena commented 8 months ago

We need this as well. Hopefully the fix PR can be reviewed soon!