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

Open menu should support background scrolling #6927

Open
trshafer opened this issue Sep 7, 2017 · 8 comments · May be fixed by #7779
Open

Open menu should support background scrolling #6927

trshafer opened this issue Sep 7, 2017 · 8 comments · May be fixed by #7779
Labels
area: material/menu P4 A relatively minor issue that is not relevant to core functions

Comments

@trshafer
Copy link
Contributor

trshafer commented Sep 7, 2017 •
edited
Loading

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
@trshafer trshafer changed the title Menu should support background scrolling Open menu should support background scrolling Sep 7, 2017
@tinayuangao
Copy link
Contributor

@mmalerba Is this intended behavior?

@jelbourn
Copy link
Member

jelbourn commented Sep 8, 2017

This used to be the intended behavior (the backdrop blocking scrolling), but now they should reposition

@jelbourn jelbourn assigned crisbeto and unassigned mmalerba Sep 8, 2017
@jelbourn jelbourn added the P4 A relatively minor issue that is not relevant to core functions label Sep 8, 2017
@crisbeto
Copy link
Member

crisbeto commented Sep 9, 2017

This only really happens if the scrollable element is the sidenav container, not the body. @jelbourn it is a little tricky to solve, because we'd have to disable pointer events on the backdrop which breaks the clicking outside to close an overlay. It can be resolved by disabling pointer events and using a click handler on the document to determine whether the user clicked outside, but that can be problematic too because the user could stop the event from propagating all the way up.

crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 13, 2017
@crisbeto
fix(overlay): backdrop blocking element scroll
6040d03 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@crisbeto crisbeto linked a pull request Oct 13, 2017 that will close this issue
Open
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 5, 2017
@crisbeto
fix(overlay): backdrop blocking element scroll
b52ee9a 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@crisbeto crisbeto mentioned this issue Nov 9, 2017
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue May 8, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
737df91 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
crisbeto added a commit to crisbeto/material2 that referenced this issue May 20, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
0491a0f 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 15, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
3ee06f6 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@crisbeto crisbeto mentioned this issue Jul 18, 2018
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 4, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
06d2d4a 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@crisbeto crisbeto mentioned this issue Aug 7, 2018
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 6, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
0afa5b8 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 29, 2018
@crisbeto
fix(overlay): backdrop blocking element scroll
ba94b3c 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@MurhafSousli MurhafSousli mentioned this issue Dec 3, 2018
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 1, 2019
@crisbeto
fix(overlay): backdrop blocking element scroll
2e2d811 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 27, 2019
@crisbeto
fix(overlay): backdrop blocking element scroll
e0de1ed 
Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes angular#6927.
@ahnpnl
Copy link

ahnpnl commented May 26, 2020

hi, I'm running into similar issue that mat-select doesn't allow me to scroll in content. Reading several related issues, I assume once this issue is solved, it will be possible to scroll inside overlay panel again ?

Will the fix be landed on v9 ? For me, I really hope it will be fixed in v9.

@mayankagarwal8188
Copy link

Hey,
Is this issue fixed ? I am not able to scroll to outer content when the mat select is opened

@mmalerba mmalerba removed the has pr label Dec 8, 2022
@Dam14n
Copy link

Dam14n commented Aug 17, 2023

Any updates on this?

@lgicc
Copy link

lgicc commented Sep 18, 2023 •
edited
Loading

Having still the same issue. Any Update?

@zarend
Copy link
Contributor

zarend commented Sep 18, 2023

Hello folks,

We're focusing on material3, improving our theming system and accessibility. I not sure someone on the Angular team will be able to get to this.

Angular Material is open source and we welcome contributions from the community. Feel free to get started on this if you are interested.

Best regards,

Zach

@deepan094 deepan094 mentioned this issue Oct 4, 2023
Closed
@crisbeto crisbeto mentioned this issue Jul 4, 2024
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/menu P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(overlay): backdrop blocking element scroll crisbeto/material2