Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DropdownMenu] dropdown menu scrolls on hover #1566

Closed
misha-erm opened this issue Jul 25, 2022 · 9 comments · Fixed by #2451
Closed

[DropdownMenu] dropdown menu scrolls on hover #1566

misha-erm opened this issue Jul 25, 2022 · 9 comments · Fixed by #2451
Labels
Package: react/dropdown-menu Type: Bug Confirmed bug

Comments

@misha-erm
Copy link

misha-erm commented Jul 25, 2022 •
edited
Loading

Bug report

Current Behavior

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

Screen.Recording.2022-07-25.at.10.43.42.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
@misha-erm misha-erm changed the title [DropdownMenu] long dropdown menu scrolls on hover [DropdownMenu] dropdown menu scrolls on hover Jul 25, 2022
@andy-hook
Copy link
Collaborator

andy-hook commented Jul 27, 2022 •
edited
Loading

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
Copy link
Author

misha-erm commented Jul 27, 2022 •
edited
Loading

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
Copy link
Collaborator

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
Copy link

What if you use a radix scroll area instead?

@hipstersmoothie
Copy link

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

@misha-erm
Copy link
Author

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

Screen.Recording.2023-09-14.at.15.06.44.mov

cpmsmith added a commit to cpmsmith/radix-ui-primitives that referenced this issue Oct 12, 2023
@cpmsmith
Don’t scroll menus in response to hover
aad5c17 
By default, when a menu item is focused, browsers will scroll it into view.
Sometimes even into the centre of the view. This is good when using a keyboard,
because the focused item is automatically visible, but when it was focused in
response to mouse movement, it has the effect of moving the item out from
underneath the pointer.

Fixes radix-ui#1566
@cpmsmith cpmsmith mentioned this issue Oct 12, 2023
Merged
@nina-loet
Copy link

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

@cpmsmith
Copy link
Contributor

cpmsmith commented Feb 5, 2024

@nina-loet I've got a PR open which fixes it (#2451), but it looks like Radix haven't been reviewing incoming PRs lately.

benoitgrelard pushed a commit to cpmsmith/radix-ui-primitives that referenced this issue Mar 6, 2024
@cpmsmith @benoitgrelard
Don’t scroll menus in response to hover
0173093 
By default, when a menu item is focused, browsers will scroll it into view.
Sometimes even into the centre of the view. This is good when using a keyboard,
because the focused item is automatically visible, but when it was focused in
response to mouse movement, it has the effect of moving the item out from
underneath the pointer.

Fixes radix-ui#1566
@pozdena
Copy link

pozdena commented Mar 14, 2024

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

vladmoroz pushed a commit that referenced this issue Jun 11, 2024
@cpmsmith
Don’t scroll menus in response to hover (#2451)
cb9f04d 
By default, when a menu item is focused, browsers will scroll it into view.
Sometimes even into the centre of the view. This is good when using a keyboard,
because the focused item is automatically visible, but when it was focused in
response to mouse movement, it has the effect of moving the item out from
underneath the pointer.

Fixes #1566
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: react/dropdown-menu Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Menu] Don’t scroll menus in response to hover cpmsmith/radix-ui-primitives
8 participants
@hipstersmoothie @benoitgrelard @pozdena @misha-erm @cpmsmith @andy-hook @clearly-outsane @nina-loet