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.

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

bug(MATERIAL): Close Scroll Strategy is triggered by scroll behavior within the overlay #26780

Closed
1 task
yalquorashy opened this issue Mar 13, 2023 · 1 comment · Fixed by #26840
Closed
1 task
Assignees
Labels
area: cdk/overlay P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@yalquorashy
Copy link

yalquorashy commented Mar 13, 2023

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

I was working on a bug related to dropdowns moving around the screen when a scroll happens within its parent container. The proposed solution was to add a cdkScrollable directive and a 'close' Scroll Strategy to the dropdown component used.
A potential bug in Angular Material was discovered where if two nested scrollable containers exist (i.e. an overlay containing a cdk-virtual-scroll-viewport component within a scrollable window), the global scrollDispatcher would get triggered if a scroll within the dropdown occurs and this would cause the dropdown to close. Consequently, the user would never be able to scroll within the dropdown without abruptly closing it. The proposed solution for this was to inject a local scrollDispatcher instance in the overlay service, and the scroll event fired from the dropdown would not trigger the close scroll strategy.
Finally, once the dropdown is closed on outside scroll, the dropdown search field should be unfocused, and for that, .detachments() was called in the overlay service.

Reproduction

https://stackblitz.com/edit/angular-ru7qdi-tbavjg?file=src%2Fapp%2Fcdk-overlay-basic-example.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fcdk-overlay-basic-example.ts,src%2Fapp%2Fcdk-overlay-basic-example.css,package.json

Expected Behavior

The local Scroll Dispatcher instance would not be needed and scrolling within the dropdown would not trigger the closing scroll strategy, since the scroll strategy is related to scroll behavior outside of the overlay and not within it (see: https://material.angular.io/cdk/overlay/overview#scroll-strategies)

image

Actual Behavior

Scrolling within the dropdown overlay causes it to close.

Environment

  • Angular: 15.0.0
  • CDK/Material: 15.0.0
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@yalquorashy yalquorashy added the needs triage This issue needs to be triaged by the team label Mar 13, 2023
@yalquorashy yalquorashy changed the title bug(MATERIAL): bug(MATERIAL): Close Scroll Strategy is triggered by scroll behavior within the overlay element Mar 13, 2023
@yalquorashy yalquorashy changed the title bug(MATERIAL): Close Scroll Strategy is triggered by scroll behavior within the overlay element bug(MATERIAL): Close Scroll Strategy is triggered by scroll behavior within the overlay Mar 13, 2023
@crisbeto crisbeto self-assigned this Mar 27, 2023
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/overlay and removed needs triage This issue needs to be triaged by the team labels Mar 27, 2023
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 27, 2023
Fixes that the `CloseScrollStrategy` was being triggered by scrollables inside the overlay.

Fixes angular#26780.
crisbeto added a commit that referenced this issue Mar 27, 2023
…#26840)

Fixes that the `CloseScrollStrategy` was being triggered by scrollables inside the overlay.

Fixes #26780.
crisbeto added a commit that referenced this issue Mar 27, 2023
…#26840)

Fixes that the `CloseScrollStrategy` was being triggered by scrollables inside the overlay.

Fixes #26780.

(cherry picked from commit 24fab99)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 27, 2023
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: cdk/overlay P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants