bug(mat-autocomplete): Autocomplete options are moving with dialog scrollbar

[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

See: #30254, it was present in 18 version.

Description

Demo: https://github.com/lopatnov/autocomplete-issue

Reproduction

StackBlitz link: I don't use StackBlitz, don't know how to upload demo here.
Steps to reproduce:

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

Expected Behavior

Options of Autocomplete should stay below autocomplete, as it was opened. They don't need to move with dialog scrollbar.

Actual Behavior

When dialog scrollbar moves, then autocomplete options also moves.

Environment

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

[wagnermaciel]

Hi @lopatnov, unfortunately I cannot download and run your repo because of potential security concerns. Could you try recreating the demo on stackblitz? Here is a starting point you can use:

https://stackblitz.com/run?file=.gitignore

[lopatnov]

I'll try to figure out how to do this today after work. Pay attention to this comment please: #30254 (comment) I showed the difference for mat-select and mat-autocomplete and why for mat-select it doesn't working and for mat-autocomplete this issue working. The difference is in backdrop, that for mat-select exists.

[lopatnov]

@wagnermaciel , I tried it now. It's first time I'm trying stackblitz. Try this link: https://stackblitz.com/~/github.com/lopatnov/autocomplete-issue. Does it working?

[lopatnov]

Detail process in image how to reproduce:

[wagnermaciel]

Yeah, the stackblitz worked - thanks for putting that together!

A temporary workaround would be to close the autocomplete when you scroll the dialog content

For some reason I can't fork the stackblitz you shared but here is how you could accomplish this:

<mat-dialog-content (scroll)="trigger.closePanel()"> <!-- Close the panel on scroll -->

    <mat-form-field>
      <mat-label>Number</mat-label>
      <input
        type="text"
        placeholder="Pick one"
        aria-label="Number"
        matInput
        [formControl]="myControl"
        [matAutocomplete]="auto"
        #trigger="matAutocompleteTrigger" <!-- Get a ref to the autocomplete trigger -->
      />

[lopatnov]

@wagnermaciel , Why is there a backdrop for mat-select, but not for mat-autocomplete? Why do I need to use a workaround for this? It's just a bug and I hope it will be fixed.

[lopatnov]

Also, try to move dialog window. In that way options will be on the same place and this is the same issue

[lopatnov]

Added second case, try to move dialog window when autocomplete was opened: