adobe / adobe/spectrum-web-components

[Bug]: Scroll-jumping behavior in picker menus on hover

Open
#5,551 3 comments 0 reactions 0 assignees View on GitHub
bug Component:Menu Component:Picker SEV 4
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-picker, sp-menu

### Expected behavior

When hovering over an that contains overflow content, the scroll position should not shift on pointer enter.

### Actual behavior

When activating the and hovering over the subsequent that contains generative model selections in Firefly Boards, users are experiencing a brief scroll-jumping behavior that can be disorienting.

### Screenshots

https://github.com/user-attachments/assets/a8f7524f-b0d4-4883-b7a8-e5df0f510007

https://github.com/user-attachments/assets/7ba3ec82-08c7-45e0-921f-cc2cc11373ea

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

The issue can be reproduced in this Storybook story (see attached video): https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/picker--custom

Anecdotally, this seems to happen more often when a menu item that would otherwise be hidden by overflow is selected.

Screen recording the same behavior in our app (Firefly Boards)

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the sp-picker and sp-menu components and reproduce the behavior in the linked Storybook picker--custom story using Chrome. Compare the scroll position when entering a menu containing overflow content, especially when an otherwise-hidden item is selected. Done means pointer entry no longer causes the menu to jump while preserving the existing picker behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.