fix(material/timepicker): unable to reopen if closed by scroll strategy (#30561)

The timepicker wasn't updating its internal state when it gets closed through the overlay which meant that the user can't reopen it.

Fixes #30558.

Author: crisbeto

src/material/timepicker/BUILD.bazel

@@ -54,12 +54,15 @@ ng_test_library(
     deps = [
         ":timepicker",
         "//src/cdk/keycodes",
+        "//src/cdk/overlay",
+        "//src/cdk/scrolling",
         "//src/cdk/testing/private",
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
+        "@npm//rxjs",
     ],
 )
 

src/material/timepicker/timepicker.spec.ts

@@ -1,4 +1,4 @@
-import {Component, Provider, signal, ViewChild} from '@angular/core';
+import {Component, inject, Provider, signal, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {DateAdapter, provideNativeDateAdapter} from '@angular/material/core';
@@ -24,10 +24,13 @@ import {
 import {MatInput} from '@angular/material/input';
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
 import {MatTimepickerInput} from './timepicker-input';
-import {MatTimepicker} from './timepicker';
+import {MAT_TIMEPICKER_SCROLL_STRATEGY, MatTimepicker} from './timepicker';
 import {MatTimepickerToggle} from './timepicker-toggle';
 import {MAT_TIMEPICKER_CONFIG, MatTimepickerOption} from './util';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
+import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {Overlay} from '@angular/cdk/overlay';
+import {Subject} from 'rxjs';
 
 describe('MatTimepicker', () => {
   let adapter: DateAdapter<Date>;
@@ -440,6 +443,38 @@ describe('MatTimepicker', () => {
         flush();
       }).not.toThrow();
     }));
+
+    it('should be able to reopen the panel when closed by a scroll strategy', fakeAsync(() => {
+      const scrolledSubject = new Subject();
+
+      TestBed.resetTestingModule();
+      configureTestingModule([
+        {
+          provide: ScrollDispatcher,
+          useValue: {scrolled: () => scrolledSubject},
+        },
+        {
+          provide: MAT_TIMEPICKER_SCROLL_STRATEGY,
+          useFactory: () => {
+            const overlay = inject(Overlay);
+            return () => overlay.scrollStrategies.close();
+          },
+        },
+      ]);
+
+      const fixture = TestBed.createComponent(StandaloneTimepicker);
+      fixture.detectChanges();
+      fixture.componentInstance.timepicker.open();
+      fixture.detectChanges();
+      expect(getPanel()).toBeTruthy();
+      scrolledSubject.next();
+      fixture.detectChanges();
+      flush();
+      expect(getPanel()).toBeFalsy();
+      fixture.componentInstance.timepicker.open();
+      fixture.detectChanges();
+      expect(getPanel()).toBeTruthy();
+    }));
   });
 
   // Note: these tests intentionally don't cover the full option generation logic

src/material/timepicker/timepicker.ts

@@ -70,7 +70,7 @@ export const MAT_TIMEPICKER_SCROLL_STRATEGY = new InjectionToken<() => ScrollStr
     providedIn: 'root',
     factory: () => {
       const overlay = inject(Overlay);
-      return () => overlay.scrollStrategies.reposition();
+      return () => overlay.scrollStrategies.close();
     },
   },
 );
@@ -340,10 +340,8 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
       hasBackdrop: false,
     });
 
-    this._overlayRef.keydownEvents().subscribe(event => {
-      this._handleKeydown(event);
-    });
-
+    this._overlayRef.detachments().subscribe(() => this.close());
+    this._overlayRef.keydownEvents().subscribe(event => this._handleKeydown(event));
     this._overlayRef.outsidePointerEvents().subscribe(event => {
       const target = _getEventTarget(event) as HTMLElement;
       const origin = this._input()?.getOverlayOrigin().nativeElement;