bug(TimepickerInput): Incorrect input behavior when component is in shadow DOM

[calebkish]

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

When the MatTimepickerInput component is within a shadow DOM, the input element's value will get formatted more often than it should, which results in unexpected behavior when typing.

The reason for this is MatTimepickerInput._hasFocus() making the assumption that the component will never be in the shadow DOM, doing a check that inject(DOCUMENT).activeElement === inject(ElementRef).nativeElement.

inject(DOCUMENT) refers to the root document, so when the MatTimepickerInput component instance is in the shadow DOM, the check that MatTimepickerInput._hasFocus() is doing will never be true.

The comparison that should actually be done is inject(ElementRef).nativeElement.getRootNode().activeElement === inject(ElementRef).nativeElement.

Reproduction

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

1. Focus on the input
2. Try typing out "12:30 PM"
3. On typing "1", nothing will be in the input.
4. On typing "2", "2" will be in the input.
5. On typing ":", "2:" will be in the input.
6. On typing "3", "2:03 AM" will be in the input.
7. On typing "0", nothing will be in the input.

Expected Behavior

The expected behavior is typing "12:30 PM", and the "12:30 PM" option being selected.

Actual Behavior

1. Focus on the input
2. Try typing out "12:30 PM"
3. On typing "1", nothing will be in the input.
4. On typing "2", "2" will be in the input.
5. On typing ":", "2:" will be in the input.
6. On typing "3", "2:03 AM" will be in the input.
7. On typing "0", nothing will be in the input.

Environment

• Angular: 19.2.2
• CDK/Material: 19.2.3
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows