From 284976eafcebcf0fb6484e330341643b8ed348af Mon Sep 17 00:00:00 2001
From: Karan Mistry <karan.mistry@siemens.com>
Date: Tue, 18 Mar 2025 18:41:14 +0530
Subject: [PATCH] fix(material/autocomplete): allow overlay backdrop by setting
 hasBackdrop option

Currently when we open the panel, backdrop is not allowed and is not inline with `mat-select`, `mat-menu`, etc. This fix will align autocomplete with those components and give an option to configure it.

Fixes #30457
---
 goldens/material/autocomplete/index.api.md    |  2 +
 .../autocomplete/autocomplete-trigger.ts      |  2 +
 .../autocomplete/autocomplete.spec.ts         | 48 +++++++++++++++++++
 src/material/autocomplete/autocomplete.ts     |  7 +++
 4 files changed, 59 insertions(+)

diff --git a/goldens/material/autocomplete/index.api.md b/goldens/material/autocomplete/index.api.md
index 89629ee189bf..9337ebaeee57 100644
--- a/goldens/material/autocomplete/index.api.md
+++ b/goldens/material/autocomplete/index.api.md
@@ -131,6 +131,8 @@ export interface MatAutocompleteActivatedEvent {
 export interface MatAutocompleteDefaultOptions {
     autoActiveFirstOption?: boolean;
     autoSelectActiveOption?: boolean;
+    backdropClass?: string;
+    hasBackdrop?: boolean;
     hideSingleSelectionIndicator?: boolean;
     overlayPanelClass?: string | string[];
     requireSelection?: boolean;
diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index 4dc9182a03f3..426953017c89 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -900,6 +900,8 @@ export class MatAutocompleteTrigger
       scrollStrategy: this._scrollStrategy(),
       width: this._getPanelWidth(),
       direction: this._dir ?? undefined,
+      hasBackdrop: this._defaults?.hasBackdrop,
+      backdropClass: this._defaults?.backdropClass,
       panelClass: this._defaults?.overlayPanelClass,
     });
   }
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index 2b7bb5ba3f8b..9a27005487f9 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -3014,6 +3014,54 @@ describe('MatAutocomplete', () => {
     });
   });
 
+  describe('with backdrop in options', () => {
+    it('should not contain backdrop by default', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, []);
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      tick(500);
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
+    }));
+
+    it('should be able to add the backdrop using hasBackdrop option', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, [
+        {
+          provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+          useValue: {hasBackdrop: true},
+        },
+      ]);
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      tick(500);
+
+      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+    }));
+  });
+
+  describe('with hasBackdrop and backdropClass in options', () => {
+    it('should be able to configure custom backdrop class', fakeAsync(() => {
+      const fixture = createComponent(SimpleAutocomplete, [
+        {
+          provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+          useValue: {backdropClass: 'my-custom-backdrop-class', hasBackdrop: true},
+        },
+      ]);
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      tick(500);
+
+      const cdkPanelElement = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
+      expect(cdkPanelElement?.classList).toContain('my-custom-backdrop-class');
+    }));
+  });
+
   describe('misc', () => {
     it('should allow basic use without any forms directives', () => {
       expect(() => {
diff --git a/src/material/autocomplete/autocomplete.ts b/src/material/autocomplete/autocomplete.ts
index 5a59d5581a31..89993cdf0003 100644
--- a/src/material/autocomplete/autocomplete.ts
+++ b/src/material/autocomplete/autocomplete.ts
@@ -70,6 +70,12 @@ export interface MatAutocompleteDefaultOptions {
    */
   requireSelection?: boolean;
 
+  /** Class to be applied to the autocomplete's backdrop. */
+  backdropClass?: string;
+
+  /** Whether the autocomplete has a backdrop. */
+  hasBackdrop?: boolean;
+
   /** Class or list of classes to be applied to the autocomplete's overlay panel. */
   overlayPanelClass?: string | string[];
 
@@ -97,6 +103,7 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
     autoSelectActiveOption: false,
     hideSingleSelectionIndicator: false,
     requireSelection: false,
+    hasBackdrop: false,
   };
 }