ionic-team / ionic-team/ionic-framework

bug: iOS 17, ion-datetime jumps between months in an infinite loop after scrolling to min month

Open
#28,432 6 comments 0 reactions 0 assignees View on GitHub
bug: external type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x

### Current Behavior

On and iPhone 15 running iOS 17: When providing `min` and `max` to `` and changing months with the arrows the selector jumps between months.

https://github.com/ionic-team/ionic-framework/assets/31474146/491eb2a6-cd8c-4262-b086-00ceffd54825

### Expected Behavior

When providing `min` and `max` to `` and changing months with the arrows the selected month should change in that direction and stay selected.

https://github.com/ionic-team/ionic-framework/assets/31474146/c5d0d959-6cd2-44e7-bbda-ca8117eb1294

### Steps to Reproduce

Clone https://github.com/RobertZetterlund/datetime-bug-repro and run it. Click on the datetime selector and change the month by using the arrows. Run ios version 17 on an iphone 15 / pro

### Code Reproduction URL

https://github.com/RobertZetterlund/datetime-bug-repro

### Ionic Info

```
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package.json'

Require stack:
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/index.js
- /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.2

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v16.20.2 (/opt/homebrew/Cellar/node@16/16.20.2/bin/node)
npm : 8.19.4
OS : macOS Unknown

```

### Additional Information

This is a duplicate of https://github.com/ionic-team/ionic-framework/issues/28260 which was closed due to lack of reproducible example (which in turn links to https://github.com/ionic-team/ionic-framework/issues/25752).

Contributor guide

Open the contributing guide

Research direction

Start by running the linked datetime-bug-repro on an iPhone running iOS 17, then review the related issues #28260 and #25752 for prior investigation. Trace the ion-datetime month navigation behavior with min and max set; done means month arrows move in the selected direction without looping.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.