Skip to content

bug(cdk/listbox): using scrollbar with mouse breaks #30900

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
Open
1 task
spike-rabbit opened this issue Apr 18, 2025 · 2 comments · May be fixed by #30903
Open
1 task

bug(cdk/listbox): using scrollbar with mouse breaks #30900

spike-rabbit opened this issue Apr 18, 2025 · 2 comments · May be fixed by #30903
Labels
needs triage This issue needs to be triaged by the team

Comments

@spike-rabbit
Copy link
Contributor

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using the cdk listbox on a list that scrolls, the listbox and scroll position behaves weird if that scrollbar is operated with a mouse. The behavior gets worsed if a value is selected.
Operated by mouse means either:

  • clicking on the little arrows in that scrollbar
    Image
  • clicking on a blank space within that scrollbar
    Image

I think there was recently a similar issue in the menu: #30249

Reproduction

StackBlitz link: Also broken in your docs at https://material.angular.io/cdk/listbox/examples
Steps to reproduce:

  1. Got to example Listbox with forms validation.
  2. Select option Rat
  3. Click the down arrow two times in the scrollbar / or two times at a blank location

Expected Behavior

It should just scroll normally.

Actual Behavior

First click scrolls, at second click it jumps back to the top.

Environment

  • Angular: 19 / and the version your docs use
  • CDK/Material: 19 / and the version your docs use
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Linux / Mac
@spike-rabbit spike-rabbit added the needs triage This issue needs to be triaged by the team label Apr 18, 2025
SergheiGurgurov added a commit to SergheiGurgurov/components that referenced this issue Apr 18, 2025
@SergheiGurgurov
fix(cdk/listbox): avoid resetting scroll position when using mouse
13f3394 
The CDK listbox has some logic that forwards focus to the first item when the host is focused.
The problem is that every time the user clicks on the scrollbar, they blur the current item and focus the listbox
which then forwards focus back to the first item which in turn causes the scroll position to jump to the top.
These changes add some logic to not forward focus when focus comes from a mouse interaction.

Fixes angular#30900
@SergheiGurgurov SergheiGurgurov linked a pull request Apr 18, 2025 that will close this issue
Open
@SergheiGurgurov
Copy link

took me a while to debug, it's a problem with the focus bouncing back between the listbox and it's children, which caused the selected item to scroll into view

i submitted a PR which stops the event from being forwarded to the children when it comes from a mouse interaction, which is the same way the bug on the cdk/menu was fixed

@spike-rabbit
Copy link
Contributor Author

Thx a lot for this amazingly fast reaction

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/listbox): avoid resetting scroll position when using mouse SergheiGurgurov/components
2 participants
@spike-rabbit @SergheiGurgurov