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.

(cherry picked from commit 9e8d631)

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();