refactor(material/timepicker): account for popover overlays

Updates the timepicker to account for the fact that the event bubbling will be different when we switch to using popovers.

Author: crisbeto

goldens/material/timepicker/index.api.md

@@ -46,6 +46,8 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     readonly disabled: Signal<boolean>;
     readonly disableRipple: InputSignalWithTransform<boolean, unknown>;
     protected _getAriaLabelledby(): string | null;
+    // (undocumented)
+    _getOverlayHost(): HTMLElement | undefined;
     protected _handleAnimationEnd(event: AnimationEvent): void;
     readonly interval: InputSignalWithTransform<number | null, number | string | null>;
     readonly isOpen: Signal<boolean>;

src/material/timepicker/timepicker-input.ts

@@ -41,7 +41,7 @@ import {MAT_INPUT_VALUE_ACCESSOR} from '../input';
 import {Subscription} from 'rxjs';
 import {DOWN_ARROW, ESCAPE, hasModifierKey, UP_ARROW} from '@angular/cdk/keycodes';
 import {validateAdapter} from './util';
-import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {_getEventTarget, _getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 
 /**
  * Input that can be used to enter time and connect to a `mat-timepicker`.
@@ -265,8 +265,15 @@ export class MatTimepickerInput<D>
   }
 
   /** Handles clicks on the input or the containing form field. */
-  private _handleClick = (): void => {
-    if (!this.disabled() && this.openOnClick()) {
+  private _handleClick = (event: MouseEvent): void => {
+    if (this.disabled() || !this.openOnClick()) {
+      return;
+    }
+
+    const target = _getEventTarget(event) as Node | null;
+    const overlayHost = this.timepicker()._getOverlayHost();
+
+    if (!target || !overlayHost || !overlayHost.contains(target)) {
       this.timepicker().open();
     }
   };

src/material/timepicker/timepicker.ts

@@ -312,6 +312,10 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     this._overlayRef?.dispose();
   }
 
+  _getOverlayHost() {
+    return this._overlayRef?.hostElement;
+  }
+
   /** Selects a specific time value. */
   protected _selectValue(option: MatOption<D>) {
     this.close();