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

Author: DavidACCarvalho

src/material/select/select.html

@@ -1,9 +1,10 @@
-<div cdk-overlay-origin
-     class="mat-mdc-select-trigger"
-     (click)="open()"
-     #fallbackOverlayOrigin="cdkOverlayOrigin"
-     #trigger>
-
+<div
+  cdk-overlay-origin
+  class="mat-mdc-select-trigger"
+  (click)="open()"
+  #fallbackOverlayOrigin="cdkOverlayOrigin"
+  #trigger
+>
   <div class="mat-mdc-select-value" [attr.id]="_valueId">
     @if (empty) {
       <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{placeholder}}</span>
@@ -22,7 +23,7 @@
     <div class="mat-mdc-select-arrow">
       <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
       <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
-        <path d="M7 10l5 5 5-5z"/>
+        <path d="M7 10l5 5 5-5z" />
       </svg>
     </div>
   </div>
@@ -39,8 +40,10 @@
   [cdkConnectedOverlayOrigin]="_preferredOverlayOrigin || fallbackOverlayOrigin"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
+  (detach)="close()"
   (backdropClick)="close()"
-  (overlayKeydown)="_handleOverlayKeydown($event)">
+  (overlayKeydown)="_handleOverlayKeydown($event)"
+>
   <div
     #panel
     role="listbox"
@@ -52,7 +55,8 @@
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby()"
     [ngClass]="panelClass"
-    (keydown)="_handleKeydown($event)">
+    (keydown)="_handleKeydown($event)"
+  >
     <ng-content></ng-content>
   </div>
 </ng-template>

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 {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,38 @@ describe('MatSelect', () => {
           .withContext('Expected select element to remain focused.')
           .toBe(true);
       }));
+
+      it('should close the panel when MAT_SELECT_SCROLL_STRATEGY token was defined with overlay close method', fakeAsync(() => {
+        waitForAsync(() =>
+          configureMatSelectTestingModule(
+            [],
+            [
+              {
+                provide: MAT_SELECT_SCROLL_STRATEGY,
+                useFactory: (overlay: Overlay) => {
+                  return () => overlay.scrollStrategies.close();
+                },
+                deps: [Overlay],
+              },
+            ],
+          ),
+        );
+
+        fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+
+        const selectElement = fixture.nativeElement.querySelector('.mat-mdc-select');
+
+        dispatchFakeEvent(selectElement, 'click');
+        fixture.detectChanges();
+
+        dispatchFakeEvent(window, 'scroll');
+        fixture.detectChanges();
+
+        flush();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      }));
     });
 
     describe('selection logic', () => {