bug: selected hours of datetime picker are scrolling to top or bottom when try to select a value

[hansenchristian]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.3.3

Current behavior:

When selecting in a Datetimepicker with the format: DD/MMMM/YYYY/HH:mm the selector of the time (mostly hours) are jumping to the top or button when trying to select a value, I have max and min date set.

Expected behavior:

I can select an Value without jumping

Steps to reproduce:

Related code:

<ion-datetime  id="startDatePicker" [pickerOptions]="startPickerOptions" [max]="maxDate"
               cancelText="Abbrechen" hidden
               pickerFormat="DD/MMMM/YYYY/HH:mm">
</ion-datetime>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (C:\Users\****\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1001.2
   @angular-devkit/schematics    : 10.0.7
   @angular/cli                  : 10.1.2
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : 0.15.1
   native-run  : 1.1.0

System:

   NodeJS : v10.18.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

[kokmok]

I have the exact same issue with v4 and v5. I do not have to set a max but it never happens at the first selection, you have to open and select a value multiple times for that to happen.

[hansenchristian]

Here is a gif of the behavior

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[kokmok]

Here's a code reproduction https://github.com/kokmok/ionic-datetime-bug-reproduction-blank

I start an android adb, run ionic cordova run android -l and click on the hour and play with the datetime. Maybe you should click "done" and reopen the datetime several times to reproduce the bug.

[hansenchristian]

to reproduce just create a new angular ionic project with the latest packages from angular and ionic, use the HTML from my bug report:

<ion-datetime id="startDatePicker" [pickerOptions]="startPickerOptions" [max]="maxDate"
cancelText="Abbrechen" hidden
pickerFormat="DD/MMMM/YYYY/HH:mm">

and in your typescript i want to open the datepicker by:

document.getElementById('startDatePicker').click()

But it behaviors the same when you click on a not hidden datepicker

[1x2x3x4x]

I had to downgrade back to 5.3.2 to fix it also.

[hansenchristian]

@1x2x3x4x you are right in 5.3.2 it is working as expected thanks

[Mirrafoil]

I'm having the same problem in my applications.

I've cloned the repo that @kokmok made (thanks) and this reproduces the issue in the same way.

Ionic Info:

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.1
   npm    : 6.14.6
   OS     : macOS Catalina

[cherry-412]

I'm having the same problem also, both in browser and on devices (Android 10 and iOS 13 & 14)
In my case the hour selection is jumping 12 hours forward, ie. if i select 01:00 it jumps to 13:00. If i select a point in time above 12:00, it jumps back to 00:00.
Selecting minutes works as intended.

Ionic CLI: 5.4.4

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.