bug: Datetime throws error when blurring picker quickly

[Marius-Romanus]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When changing the time of the datetime, and quickly clicking outside (blur), it gives an error. It can be seen in the Firefox console.

Uncaught TypeError: activeElement is null

if (activeElement.disabled) {
  return;
}

Expected Behavior

expected no error

Steps to Reproduce

In the ionic example itself you can see:

https://ionicframework.com/docs/api/datetime#basic-usage

• Select an hour and quickly press outside.
• Observe the error in the firefox console.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.6
Ionic Framework : @ionic/angular 6.4.1
@angular-devkit/build-angular : 15.0.4
@angular-devkit/schematics : 15.0.4
@angular/cli : 15.0.4
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v18.12.1
npm : 9.2.0
OS : Windows 10

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

Hello @Marius-Romanus thanks for reporting this issue!

I see the issue and will categorize this as a bug in our backlog.

Note for the team when we fix this, we are incorrectly narrowing the type here: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker-column-internal/picker-column-internal.tsx#L257

It should be:

as HTMLButtonElement | null;

Which then throws appropriate linting errors that the object can possibly be undefined. We should then update the implementation below to account for the active element possibly being null.

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