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, }; }