Skip to content

bug(Autocomplete): does not lock scroll other than to its panel if opened #26048

Closed
@RobinKamps

Description

@RobinKamps

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

This may sound familiar as it is a long known issue - but perhaps with a new suggestion how to fix it.

The autocomplete panel position is bound to body/html scroll events for performance reasons.
However adding cdkScrollable on a parent scrollable div can fix the issue (may result in performance loss/flickering).
But even if the autocomplete is in a scrollable scope the scrolling may lead to bad side effects (z-index, etc.): e.g. the demo for 15.0.0:
image

Since all other components (menu, select etc.) lock the scrolling of the body/underlaying scroll div, when opened - the same user experience for the autocomplete panel would be great.

Reproduction

Steps to reproduce:

  1. https://material.angular.io/components/autocomplete/examples -> open panel and scroll
  2. https://material.angular.io/components/select/examples -> open panel and scroll

Expected Behavior

autocomplete should have a similar scrolling behaviour as other components

Actual Behavior

autocomplete does not prevent scrolling the underlying element

Environment

  • Angular: 15
  • CDK/Material: 15

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions