bug: v6 datetime, selecting time gives NaN and jumps too far when using arrow keys in firefox

[MaNic1980]

Bug Report

Ionic version:

[ ] 4.x
[ ] 5.x
[x ] 6.x

Current behavior:
We have built a sample page with the new ion-datetime and found an issue with Firefox.
After selecting the date and changing the time the model contains an invalid date string like:
2021-07-02TaN:11:00-aN:aN

Expected behavior:
The date string should be valid.

Steps to reproduce:

1. Open page with ion-datetime
2. Click on date
3. Change time
4. Check value of ngModel variable

Related code:

<ion-datetime [(ngModel)]="dateTest" ></ion-datetime>

Ionic info:

ionic info

Ionic:

   Ionic CLI                     : 6.16.3
   Ionic Framework               : @ionic/angular 6.0.0-beta.0
   @angular-devkit/build-angular : 12.0.4
   @angular-devkit/schematics    : 12.0.4
   @angular/cli                  : 12.0.4
   @ionic/angular-toolkit        : 4.0.0

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. Can you provide some additional information about what time you are selecting? (I.e. are you selecting in between values and letting it snap to the nearest value?)

[NiklasMerz]

Bildschirmaufnahme.2021-07-01.um.16.20.54.mov

Thanks @liamdebeasi. I am working together with @MaNic1980 on this issue. We just found out that Firefox has another issue with the time. We are clicking on the time and pressing the down key on the keyboard and the time skips 3 hour forward instead of just one like Chrome does.

[liamdebeasi]

Thanks! I can reproduce the NaN error -- that seems to be a Framework bug. The arrow key bug looks to be something specific to Firefox, so I can look into reporting that bug to the Mozilla team. The arrow key bug looks to be something in Framework as well, but it only impacts Firefox somehow. We will look into this.

[liamdebeasi]

Quick update: The arrow key bug appears to be a Firefox bug. I reported it to the team here: https://bugzilla.mozilla.org/show_bug.cgi?id=1719330.

I can also reproduce this in Safari, but it appears to be fixed in Safari Technology Preview.

[liamdebeasi]

Thanks for the issue. The time selection NaN issue has been resolved via #23583, and a fix will be available in an upcoming release of Ionic Framework.

I am going to keep an eye on https://bugzilla.mozilla.org/show_bug.cgi?id=1719330 and will open another issue if looks like this won't be fixed in time for when v6 ships.

[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.