bug: <ion-input type="date"> completely freezes mobile safari when switching between two inputs

[cg-roling]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

On Mobile Safari (tested on iPhone 13 Pro), clicking between multiple elements can lock up the browser.

Expected Behavior

Clicking between multiple elements shouldn't have any negative effects.

Steps to Reproduce

I have created a Stackblitz with repro directions that you can open on Mobile Safari here: https://ionic6-angular13-2zcq7v.stackblitz.io

You can view the source and edit here: https://stackblitz.com/edit/ionic6-angular13-2zcq7v

Code Reproduction URL

https://github.com/cg-roling/ionic6-datetime-repro

Ionic Info

The stackblitz I forked from seems to have some dependency issues, I wasn't able to successfully run npm install locally. If necessary I can start over with a fresh ionic project. This reproduces easily in a production app as well.

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Does this happen with the native text input <input type="datetime-local" />?

[cg-roling]

It does not happen with the native inputs. I actually put a couple of native inputs in the reproduction case to play with — it seems to be specifically when tapping another ion-input while the datepicker is up.

I did notice a behavior difference that might be relevant. Clicking between the native inputs, the datepicker popup gets closed when clicking on the next input, and you have to click again to open the new input.

With the ion-inputs, the popup window is opened immediately when clicking the second input. Perhaps iOS isn't a fan of that?

[liamdebeasi]

Thanks for the additional info. There are a couple things going on here.

1. When using ion-input, Ionic's scroll assist utility kicks in. This utility scrolls the content to ensure that the focused ion-input is not covered by the on screen keyboard. This logic seems to trigger a bug in Safari which results in the browser locking up. Fortunately, this particular bug is resolved in the iOS 16 developer beta.

2. Using scroll assist with type="date" or type="datetime-local" has another side effect where the positioning of the popup is sometimes wrong. Even though issue 1 is resolved in iOS 16, this particular behavior remains.

I can add logic to exclude ion-input elements that use 'date' or 'datetime-local' types from scroll assist, resolving both issues even on older versions of iOS.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25749, and a fix will be available in an upcoming release of Ionic Framework.

[cg-roling]

That's awesome, thanks!

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