bug(CDK menu): Menu directive breaks scrollbar scrolling behavior

[ptu14]

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 the @angular/cdk/menu directive is applied to a scrollable element, it causes scroll behavior abnormalities. Clicking in the empty space within the scrollable area causes the content to unexpectedly scroll to the top. Additionally, general mouse scrolling behavior becomes erratic and unpredictable.

Reproduction

StackBlitz link: https://stackblitz.com/edit/gwxbpu?file=src%2Fexample%2Fcdk-menu-inline-example.css,src%2Fexample%2Fcdk-menu-inline-example.html
Steps to reproduce:

• 1. Create a scrollable container with some content that exceeds the container height
• 2. Apply the @angular/cdk/menu directive to this container
• 3. Try to scroll using the mouse:
• 4. Click in the empty space within the scrollable area

video:
https://github.com/user-attachments/assets/1604a8f4-06b6-4bbf-809d-de0ecb2bb2f6

Expected Behavior

Clicking in empty space of the scrollbar should behave like natively, i.e. actually scroll down

Actual Behavior

Clicking in empty space within the scrollable area causes the content to immediately scroll to the top

Environment

• Angular: 19.0.2
• CDK/Material: 19.0.2
• Browser(s): Chrome Version 131.0.6778.85 (Official Build) (arm64), Safari Version 18.1 (18619.2.8.111.5, 18619), Probably all browsers
• Operating System (e.g. Windows, macOS, Ubuntu): macOS, probably all systems

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}