bug(AUTOCOMPLETE): Autocomplete options popup is not binded to its target element when dialog is scrolled

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

We have an autocomplete element in dialog body and dialog body is scrollable. if we open the autocomplete options and scroll the dialog body, the options popup is not bind to its trigger element and is floating headless.

Recording.Mini.mp4

Reproduction

StackBlitz link: https://stackblitz.com/edit/yqwgdw?file=src%2Fexample%2Fdialog-overview-example.ts
Steps to reproduce:

1. Create a Mat Dialog.
2. Place a Mat Autocomplete element in dialog body.
3. Add 500px margin all around the autocomplete to introduce scrollbars.
4. Open the autocomplete popup for options.
5. Scroll the underling dialog body.

Expected Behavior

The options popup should stay attached to input box.

Actual Behavior

The options popup is floating headless.

Environment

• Angular: 17.3.0
• CDK/Material: 17.3.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

You can fix it on your end by adding the cdkScrollable attribute to mat-dialog-content. That being said, we should be doing this automatically.

You can fix it on your end by adding the cdkScrollable attribute to mat-dialog-content. That being said, we should be doing this automatically.

The workaround will work for now.