Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
In Development
Last Updated: 13 Dec 2024 09:49 by ADMIN
Paul
Created on: 02 Oct 2024 08:52
Category: Kendo UI for Angular
Type: Bug Report
0
iOS - Datepicker scrolls to top of page when inputting date

When typing into the Angular Datepicker on iOS devices, the page scrolls unexpectedly after entering the first character of any date part (day, month, year). The scroll occurs on each subsequent character input (2nd, 3rd, etc.), making it difficult to use the input field.

Steps to Reproduce:

  1. Open a webpage with a Kendo UI Datepicker on an iPhone (iOS v16+, any model). Ensure the datepicker is positioned far enough down the page that scrolling is required to reach it. Example can be seen at https://angular-v7j3ag.stackblitz.io/
  2. Focus on the Datepicker input field.
  3. Enter a date manually using the on-screen keyboard.
  4. After typing the first character into any date part, the page behaves normally, but it scrolls up to the top of the page on subsequent character inputs.

Expected Behaviour: The page should remain in place when typing, allowing smooth input without scrolling.

Observed Behaviour: The page scrolls up after entering the second character of any date part (day, month, or year) and continues to do so on each further input.

Reproduction: The issue was recreated using Kendo's own Datepicker example (with added spacing to demonstrate the scroll behaviour). https://stackblitz.com/edit/angular-v7j3ag

Affected Platforms:

  • All iPhone models (tested 11 - 15) with iOS v16+ (reproducible on Safari and Chrome browsers).
  • Does not occur on desktop or Android devices.

Additional Notes:

  • A video demonstrating the behaviour is attached.
  • This has been reproduced on both BrowserStack and physical iPhone devices.

I couldn’t find an existing bug report related to this issue, so I would appreciate it if you could confirm whether this has been reported or provide further guidance.

Attached Files:
3 comments
ADMIN
Georgi
Posted on: 16 Oct 2024 11:34

Hello Paul,

Thank you very much for the clarifications provided.

Based on the additional information provided in the thread and the updated reproduction steps, I indeed managed to replicate the unexpected scroll jump of the DatePicker when the user tries to enter a date in the component while using it on a page opened on an iOS device.

Having consulted our team on the matter, it turned out that the current behavior of the DatePicker component is indeed a bug on our side. For this reason, I logged an issue in our public GitHub repository, and what I would suggest would be to subscribe to it in order to track the resolution process:

As a token of gratitude for pointing out this issue to us, I updated your Telerik Points.

In these lines of words, I would like to apologize for any inconvenience that this unexpected behavior might be causing.

Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Paul
Posted on: 09 Oct 2024 16:03

Hi Georgi

Thank you for looking into this. The reason you couldn't reproduce the bug is that you're viewing the Stackblitz example in the editor/preview mode (as seen in the videos with the "editor" and "preview" options visible).

To view the isolated example outside of the editor, please use this direct link: https://angular-v7j3ag.stackblitz.io (if prompted, select "Run this project"). Or if in the editor, click the button shown in the attached screenshot taken from your recording.

 

I've confirmed the issue on iPhone 15 Pro Max and iPhone 12 Pro (iOS 17) via BrowserStack. I also tried updating to Kendo UI 16.11.0, but the issue persists.

Thanks

Paul

ADMIN
Georgi
Posted on: 09 Oct 2024 07:10

Hello Paul,

Thank you very much for the details provided.

I have successfully opened the screen recording that was attached to the thread and, indeed, noticed the unexpected scroll jump when testing the DatePicker component in an emulator on an iOS device.

Having done that, I opened the StackBlitz demo that was attached and followed the provided reproduction steps in an attempt to reproduce the unexpected scroll jump. However, from what I have noticed, the DatePicker component behaves according to the expectations on my side, and no scroll jump could be observed.

For your reference, I am attaching to this response two screen recordings demonstrating the behavior of the DatePicker both in the Chrome and Safari browsers.

It is important to mention that I have used an iPhone 15 Pro Max and an iPhone 12 Pro for performing the tests. Both devices use iOS v17.6.1.

Since I want to avoid any misunderstandings and provide the maximum utility out of the support service, I would ask you to provide more detailed information about the specifics of the implementation or, ideally, send an isolated runnable example where the unexpected scroll could be observed. This would allow me to reproduce the issue on my side, debug it, and thus come up with a more suitable suggestion.

I am looking forward to your reply.

Regards,
Georgi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Attached Files:
Create an account Log In
View
Type
Status
Category