bug(timepicker): Multiple overlays and host already has a portal attached

[luthesebas]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Clicking outside a Timepicker enclosed by a MatFormField causes an error and multiple Timepicker overlays.

ERROR Error: Host already has a portal attached
    at throwPortalAlreadyAttachedError (portal.mjs:17:9)
    at DomPortalOutlet.attach (portal.mjs:196:9)
    at OverlayRef.attach

Reproduction

Error "Host already has a portal attached"

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-v6k1y4ci?file=src%2Fmain.ts
Steps to reproduce:

1. Open StackBlitz link
2. Click into the Timepicker input (overlay should open upwards)
3. Click right below the Timepicker. Just right below the MatFormField where hints and errors (would) appear
4. Look at the browser console output

Multiple overlays

Steps to reproduce:

1. Head to https://material.angular.io/components/timepicker/examples
2. Scroll so that a timepicker is at the bottom of the browser window, which should cause the timepicker overlay to open upwards.
3. Click into the Timepicker input (overlay should open upwards)
4. Click right below the Timepicker. Just right below the MatFormField where hints and errors (would) appear
5. Now there should be two Timepicker overlays
6. Repeat step 4 as often as you like to create N overlays

(no idea how to reproduce this behavior in StackBlitz/local)

Code for reproduction

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DemoMaterialModule],
  template: `
    <mat-form-field>
      <mat-label>Pick a time</mat-label>
      <input matInput [matTimepicker]="picker">
      <mat-timepicker-toggle matIconSuffix [for]="picker"/>
      <mat-timepicker #picker/>
    </mat-form-field>
  `,
  styles: `
    :host {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: calc(100vh - 2rem);
    }
  `
})
export class App {}

Expected Behavior

• No error
• No multiple Timepicker overlays
• The already existing overlay should be closed and not reopened

Actual Behavior

• error "Host already has a portal attached"
• Multiple Timepicker overlays (at leat at https://material.angular.io/components/timepicker/examples)
• The already existing overlay gets closed and reopened

Environment

• Angular: 19.2.0
• CDK/Material: 19.2.1
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}