TimePicker popup shows wrong scroll position on first open

Dominikg77

### Description ## Environment - @progress/kendo-angular-dateinputs: 25.0.0 - @angular/core: 22.1.3 - @progress/kendo-theme-material: 14.5.0 - Browser: (fill in, e.g. Chrome 12x) - OS: Windows 11 ## Description When a `kendo-timepicker` is bound to a `value` and the popup is opened for the very first time, the Hour/Minute/AM-PM scroll lists are positioned at the wrong scroll offset (e.g. showing "8:48 AM" centered while the bound `value` is 9:55 AM, and the input itself correctly displays "9:55 AM"). Closing and reopening the popup a second time scrolls to the correct, selected value every time after that. Only the very first open is affected. ### Steps To Reproduce ## Steps to reproduce 1. Create a component with: ```ts public value: Date = new Date(2026, 7, 19, 9, 55); ``` ```html <kendo-timepicker [(value)]="value"></kendo-timepicker> ``` 2. Load the page fresh (hard refresh). 3. Click the timepicker to open the popup for the first time. 4. Observe: the Hour/Minute lists are scrolled to an unrelated time (e.g. 8:48) instead of the bound value (9:55), even though the input text shows the correct value. 5. Close the popup and reopen it: the lists now scroll to the correct value (9:55) and remain correct on every subsequent open. ## What we ruled out - Not related to Angular animations: reproduces identically with `provideAnimations()`, `provideAnimationsAsync()`, and with `popupSettings.animate = false`. - Not a version regression: reproduces across multiple `@progress/kendo-angular-dateinputs` versions (tried upgrade/downgrade). ## Suspected cause Likely related to the known pattern described in telerik/kendo-angular#3602, where popup content is first rendered invisibly to perform layout measurements before being shown at its final position. It appears the scroll-to-selected-value calculation for the Hour/Minute/AM-PM lists runs against this initial, not-yet-settled layout, producing an incorrect offset that is only corrected on subsequent opens (when layout is already cached/settled). ### Screenshots or video <img width="387" height="564" alt="Image" src="https://github.com/user-attachments/assets/e5ff344c-ae64-408e-a6b5-45b3a1903286" /> ### Actual Behavior Programmatically toggle the popup open then closed once, right after the view initializes (`ngAfterViewInit`), so Kendo performs its internal first-render measurement before the user ever opens it manually: ```ts @ViewChild(TimePickerComponent) private timepicker!: TimePickerComponent; public ngAfterViewInit(): void { this.timepicker.toggle(true); this.timepicker.toggle(false); } ``` This is invisible to the user (no observable flash) and reliably fixes the first real open. See `src/app/app.ts` in this repo for the applied fix. ### Expected Behavior The popup should scroll to the bound `value` correctly on the very first open, without requiring a warm-up toggle. ### Browser Chrome ### Browser version latest ### OS type MacOS, Windows ### OS version _No response_ ### Last working version of the Kendo UI for Angular package (if regression). _No response_

svetq

@Dominikg77, in the following example using the demonstrated versions, the TimePicker renders as expected: https://stackblitz.com/edit/feq7wxjl-dshbkltg. Could you provide an example or sample project demonstrating the issue?

Dominikg77

Yes, clone my Timpicker Repo. Angular ^22.1.0 kendo-angular-dateinputs: ^25.0.0 https://github.com/Dominikg77/timerpicker

svetq

@Dominikg77, add provideZoneChangeDetection() to your application configuraton. See the following article for more details: https://www.telerik.com/kendo-angular-ui/components/troubleshooting/general-issues#kendo-ui-for-angular-components-don-t-behave-as-expected-in-angular-v21

Dominikg77

I'm using Angular 20+ with a zone-less configuration. The application deliberately does not use Zone.js. This results in the following error: NG0908: Angular requires Zone.js in this configuration. I made the change in the `app.config.ts` file by calling `provideZoneChangeDetection(...)`. This explicitly configures Angular to use Zone.js-based change detection, which contradicts the intended zoneless setup of the application. Angular 20 supports zoneless change detection via `provideZonelessChangeDetection()`, while it is enabled by default starting with Angular 21. However, I would like to clarify whether the Kendo TimePicker or DateTimePicker actually requires Zone.js. Although the “Kendo DateInputs” package supports Angular 19–22, according to Kendo’s current troubleshooting documentation, some Kendo UI components still rely on Zone.js for change detection. My goal is to keep the application completely zoneless and avoid having to add Zone.js just to make the Kendo TimePicker work.

svetq

@Dominikg77, we understand your concern, especially given that maintaining a fully zoneless application is an important requirement for your project. We are actively working on the zoneless migration across all Kendo UI for Angular packages. You can expect an update of the DateInputs package in the following weeks.