Open menu should support background scrolling
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Bug, feature request, or proposal:
Bug? Reading the source, when having a menu open, I believe the background should be able to be scrolled using the mouse. The background can be scrolled with the arrow keys.
#### What is the expected behavior?
The background can scroll.
#### What is the current behavior?
The background cannot scroll.
#### What are the steps to reproduce?
1. Visit https://material.angular.io/components/menu/overview
2. Open the menu by clicking the trigger: "Menu"
3. Attempt to scroll the page (not the menu) using the mouse.
#### What is the use-case or motivation for changing an existing behavior?
A dialog box should block background scrolling, but the menu should not.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Current
#### Is there anything else we should know?
It is blocked by `pointer-events: auto`: https://github.com/angular/material2/blob/4d82f833c7e4a22814b8e225f05ef4ba01a86ad6/src/cdk/overlay/_overlay.scss#L61.
The menu does have the scroll strategy of reposition, which I believe should mean that the background should be able to be scrolled: https://github.com/angular/material2/blob/fe37cb2551929844d5467e1b9bf45032df35981f/src/lib/menu/menu-trigger.ts#L57
Contributor guide
Research direction
Reproduce the issue at the Material menu overview URL, then read src/cdk/overlay/_overlay.scss around pointer-events and src/lib/menu/menu-trigger.ts around the menu scroll strategy. Verify that mouse scrolling moves the page while a menu is open, without changing the dialog behavior described in the report.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100