bug(Autocomplete): Incorrect overlay in Dialog

[lopatnov]

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

• Create Autocomplete in dialog with scroll
• Open Autocomplete options
• Scroll down
• Autocomplete options above the dialog, because overlay for Autocomplete creates in the same way of dialog. So overlay for Autocomplete is wrong. Options should be inside Dialog.

Reproduction

StackBlitz link:
Steps to reproduce:

1. Create Autocomplete in dialog with scroll
2. Open Autocomplete options
3. Scroll down
4. Autocomplete options above the dialog, because overlay for Autocomplete creates in the same way of dialog.

Expected Behavior

Autocomplete options should be inside the dialog

Actual Behavior

Autocomplete options above the dialog

Environment

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

To be precise:

"@angular/cdk": "^18.2.14",
"@angular/common": "^18.2.13",
"@angular/material": "^18.2.14",

[lopatnov]

As I see cdk-overlay-backdrop wasn't created as for mat-select.
Example for Autocomplete:

Example for Select:

[crisbeto]

Can you post a reproduction?

[lopatnov]

I have updated to 19.1. It looks like this issue was fixed.

[lopatnov]

Not, still present, sorry the joy was premature

[lopatnov]

Can you post a reproduction?

Maybe you will provide example in Examples how to do this correctly?

I don't see Autocomplete in the dialog here:
https://material.angular.io/components/autocomplete/examples

• Open dialog with some elements, to have scroll in the dialog
• Open Autocomplete items
• Scroll down dialog scroll and you will see issue

[crisbeto]

Ah so is the issue that the overlay isn't being clipped by the dialog's overflow?