bug(autocomplete): scroll locking

[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

autocomplete does not behave like other material compnents like menu or select - those lock the scrolling of the underlying div/html/body.

Reproduction

Steps to reproduce:

1. https://material.angular.io/components/select/overview
2. open autocomplete and scroll on body

Expected Behavior

scroll is locked

Actual Behavior

scrolling is enabled - inconvenient behavior between material components, resulting in multiple issues e.g. z-index or if a container for scrolling is used the autocomplete panel does not scroll.

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

[MardariG]

Is this under any considerations for fixing? This is also not working when having more than one autocompletes per page and using scroll blocking strategy. Focusing first autocomplete will work as expected, but if you focus first, and then focus second, the second one scroll strategy is broken. Oh, it may be a different issue after all. Just notice that everywhere on material demo page blocking scroll strategy is working, but not for autocomplete.

[danieldiazastudillo]

Any way to bypass or patch this problem via CSS or using another API for the popover? (in case is using some specific API for that purpose). We are using Angular Material 17 and the problem persists (even in AM18).

This doesn't replicate if you use a mouse, it only triggers when using the mousepad.

[M0o4]

Is it really hard to add a transparent backdrop?

[M0o4]

Solution for 16.0.2

@Directive({
  selector: '[matAutocomplete][autocompleteBackdrop]',
})
export class MatAutocompleteBackdropDirective implements OnInit {
  constructor(private readonly matAutocompleteTrigger: MatAutocompleteTrigger) {}

  ngOnInit(): void {
    this.matAutocompleteTrigger['_getOverlayConfig'] = (): OverlayConfig => {
      return new OverlayConfig({
        positionStrategy: this.matAutocompleteTrigger['_getOverlayPosition'](),
        scrollStrategy: this.matAutocompleteTrigger['_scrollStrategy'](),
        width: this.matAutocompleteTrigger['_getPanelWidth'](),
        direction: this.matAutocompleteTrigger['_dir'] ?? undefined,
        panelClass: this.matAutocompleteTrigger['_defaults']?.overlayPanelClass,
        hasBackdrop: true,
        backdropClass: 'cdk-overlay-transparent-backdrop',
      });
    };
  }
}