bug: datetime preferWheel min/max increases the number of dates initially rendered

[maxfloden]

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

Adding a max value to ion-datetime with preferWheel="true" slows down performance. Leaving out max or max value close in time works fine. Max value for example 10 years in future makes wheel perform very slow.

My guess is that using max value, all values are read into wheel and hence slow. Omitting max seems to read values adhoc (I can sense a slight delay when moving into a new month)

Tested on iOS device (slow/old device: iPhone 7, iOS 15.7), not tested on Android.

Expected Behavior

Wheel should perform well with max value set.

Steps to Reproduce

In code below, setting max to 2032 is slow. Setting max to 2022 works fine. Omitting max works fine.

        <ion-input
          id="trigger-startTime"
          [value]="formatDateString(startTime)"
          readonly="true"
        >
          <ion-modal 
              trigger="trigger-startTime" 
              style="--max-height:200px;"
              [initialBreakpoint]="1" 
              [breakpoints]="[1]" 
              handle="false" 
              [keepContentsMounted]="true"
            >
            <ng-template>
              <ion-datetime
                id="startTime"
                [(ngModel)]="startTime"
                (ionChange)="onChangeStartTime($event)"
                min="{{nowTime}}"
                max="2032"
                locale="sv-SE"
                preferWheel="true"
                minuteValues="{{minuteValues}}"
              >
              </ion-datetime>
            </ng-template>
          </ion-modal>
        </ion-input>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.1 (/Users/maxfloden/.nvm/versions/node/v14.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.9
   @angular-devkit/build-angular : 14.2.3
   @angular-devkit/schematics    : 14.0.3
   @angular/cli                  : 14.2.3
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

   Capacitor CLI      : 4.3.0
   @capacitor/android : 4.3.0
   @capacitor/core    : 4.3.0
   @capacitor/ios     : 4.3.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.1

System:

   Android SDK Tools : 26.1.1 (/Users/maxfloden/Library/Android/sdk)
   NodeJS            : v14.16.0 (/Users/maxfloden/.nvm/versions/node/v14.16.0/bin/node)
   npm               : 6.14.15
   OS                : macOS Monterey
   Xcode             : Xcode 13.4 Build version 13F17a

Additional Information

No response

[liamdebeasi]

Thanks for the report. The problem here is when accounting for the max and min internally, we use those values to widen the sliding window we use to determine which dates to render. Instead, the max and min values should only be used to determine which dates to render once we've reached the end of the window.

Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via #26065, and a fix will be available in an upcoming release of Ionic Framework. Feel free to continue testing the dev build and let me know if you run into any issues.

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