Cherry pick fixes (#30715)

* fix(material/select): close panel on detach output event (#30634)

* fix(material/autocomplete): allow overlay backdrop by setting hasBackdrop option (#30631)

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

---------

Co-authored-by: DavidACCarvalho <[email protected]>
Co-authored-by: Karan Mistry <[email protected]>

Author: 3 people

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;

src/material/autocomplete/autocomplete-trigger.ts

@@ -899,6 +899,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,
     });
   }

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(() => {

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

src/material/select/select.html

@@ -40,6 +40,7 @@
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
   [cdkConnectedOverlayFlexibleDimensions]="true"
+  (detach)="close()"
   (backdropClick)="close()"
   (overlayKeydown)="_handleOverlayKeydown($event)">
   <div

src/material/select/select.spec.ts

@@ -15,7 +15,7 @@ import {
   TAB,
   UP_ARROW,
 } from '@angular/cdk/keycodes';
-import {OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
+import {CloseScrollStrategy, Overlay, OverlayContainer, OverlayModule} from '@angular/cdk/overlay';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {
   createKeyboardEvent,
@@ -56,15 +56,15 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
-import {ErrorStateMatcher, MatOption, MatOptionSelectionChange} from '../core';
-import {FloatLabelType, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '../form-field';
-import {MAT_SELECT_CONFIG, MatSelectConfig} from '../select';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {EMPTY, Observable, Subject, Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {ErrorStateMatcher, MatOption, MatOptionSelectionChange} from '../core';
+import {FloatLabelType, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '../form-field';
+import {MAT_SELECT_CONFIG, MatSelectConfig} from '../select';
 import {MatSelectModule} from './index';
-import {MatSelect} from './select';
+import {MAT_SELECT_SCROLL_STRATEGY, MatSelect} from './select';
 import {
   getMatSelectDynamicMultipleError,
   getMatSelectNonArrayValueError,
@@ -1782,6 +1782,44 @@ describe('MatSelect', () => {
           .withContext('Expected select element to remain focused.')
           .toBe(true);
       }));
+
+      it('should close the panel on scroll event when MAT_SELECT_SCROLL_STRATEGY token was defined with CloseScrollStrategy', fakeAsync(() => {
+        // Need to recreate the testing module, because the issue we're
+        // testing for only the MAT_SELECT_SCROLL_STRATEGY is defined with thw
+        // is defined with the CloseScrollStrategy
+
+        TestBed.resetTestingModule();
+        TestBed.configureTestingModule({
+          imports: [MatFormFieldModule, MatSelectModule],
+          declarations: [BasicSelect],
+          providers: [
+            {
+              provide: MAT_SELECT_SCROLL_STRATEGY,
+              useFactory: (overlay: Overlay) => (): CloseScrollStrategy =>
+                overlay.scrollStrategies.close(),
+              deps: [Overlay],
+            },
+            {
+              provide: ScrollDispatcher,
+              useFactory: () => ({
+                scrolled: () => scrolledSubject,
+              }),
+            },
+          ],
+        });
+
+        fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+
+        const select = fixture.componentInstance.select;
+        select.open();
+
+        scrolledSubject.next();
+        fixture.detectChanges();
+        flush();
+
+        expect(select.panelOpen).toBe(false);
+      }));
     });
 
     describe('selection logic', () => {