bug(mat-autocomplete): when no backdropClass is set, defaults to cdk-overlay-dark-backdrop instead of cdk-overlay-transparent-backdrop

[lelandjordon]

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

Considering this as a followup to #30457

mat-select defaults to setting its overlay backdrop with the class "cdk-overlay-transparent-backdrop", rendering a fully transparent overlay div to handle clicks outside the mat-select dropdown.

mat-autocomplete, however, ends up with a default of "cdk-overlay-dark-backdrop", rendering a translucent gray overlay div.

This behavior feels inconsistent (if it was done by design, I would like to know why).

It also means that we have to make accommodations in our code specifically for mat-autocomplete, using a provider like this to set values for both hasBackdrop and backdropClass, while we do not need to do anything special for mat-select:

providers: [
      {provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
        useValue: { hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop-or-any-value-you-want' } 
      }
  ],

One of my colleagues traced it through these steps in the code:

This is the line where MatAutocomplete copies "backdropClass" to the "OverlayConfig"... which if you don't specify will be "undefined".

components/src/material/autocomplete/autocomplete-trigger.ts

Line 915 in 57adabc

backdropClass: this._defaults?.backdropClass,

And here is the line in "OverlayConfig" class that defaults the "backdropClass" to "cdk-overlay-dark-backdrop"

components/src/cdk/overlay/overlay-config.ts

Line 28 in 57adabc

backdropClass?: string | string[] = 'cdk-overlay-dark-backdrop';

And here is the "OverlayConfig" copy constructor, note that it ignores any passed in "undefined" property values, so if you don't specify you end up with "cdk-overlay-dark-backdrop"

components/src/cdk/overlay/overlay-config.ts

Line 72 in 57adabc

if (config[key] !== undefined) {

And just for completeness... the code where "MatSelect" hardcodes the "backdropClass" to "cdk-overlay-transparent-backdrop"

components/src/material/select/select.html

Line 35 in 57adabc

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-vmwlhjb4?file=src%2Fmain.ts
Steps to reproduce:

1. Open the field labeled Autocomplete and notice the gray overlay.
2. Open the field labeled Mat-Select and notice that the overlay is transparent.

Expected Behavior

Expecting mat-autocomplete to render the same style of backdrop-overlay as mat-select by default unless we specify otherwise.

Actual Behavior

mat-autocomplete renders a translucent gray backdrop-overlay rather than transparent as mat-select does.

Environment

• Angular: 19+
• CDK/Material: 19+
• Browser(s): Chrome (others not tested)
• Operating System (e.g. Windows, macOS, Ubuntu): Win11 (others not tested)