bug: ion-datetime wheel roll autmaticaly on some androids

[Majstr]

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

v8.x

Current Behavior

In our application we used datetime input in wheel option. Our users are reporting that wheel is just moving by itself. So far we know it appears on some Samsung (Galaxy S21 FE 5G, Galaxy note 8) and Honour phones. We still don't have device to recreate bug. But we have a video of a problem.

https://github.com/user-attachments/assets/e6f890df-8f40-4f6f-a96e-e541969e491f

Here is the code we use:

<ion-item
      id="birthdayTrigger"
      class="ion-padding-horizontal ion-margin-top"
      lines="inset">
      <ion-input
        [label]="'guest.dateOfBirth' | translate"
        labelPlacement="stacked"
        class="required"
        [disabled]="!this.enabled"
        [value]="
          dateOfBirth.value | date : ('formatStrings.dateAngular' | translate)
        ">
        <ion-icon name="calendar" slot="end" color="secondary"></ion-icon>
      </ion-input>
      <ion-modal
        [keepContentsMounted]="true"
        class="ion-datetime-button-overlay"
        trigger="birthdayTrigger">
        <ng-template>
          <ion-datetime
            id="dateOfBirthSelector"
            formControlName="dateOfBirth"
            presentation="date"
            [firstDayOfWeek]="1"
            [preferWheel]="true"
            [showDefaultButtons]="true"
            (ngModelChange)="updatePaymentCategories()"
            [locale]="settingsService.language"
            [doneText]="'general.ok' | translate"
            [cancelText]="'general.cancel' | translate"></ion-datetime>
        </ng-template>
      </ion-modal>
    </ion-item>

Expected Behavior

User could choose a date without wheel of days, months and years moving by itself.

Steps to Reproduce

Add dateime input in form and open on specific device.

Code Reproduction URL

https://github.com/user-attachments/assets/e6f890df-8f40-4f6f-a96e-e541969e491f

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\Klavdij\AppData\Roaming\nvm\v20.10.0\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 8.2.5 @angular-devkit/build-angular : 18.0.4 @angular-devkit/schematics : 18.0.4 @angular/cli : 18.0.4 @ionic/angular-toolkit : 11.0.1

Capacitor:

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

Cordova:

Cordova CLI : 12.0.0 (cordova-lib@12.0.1) Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe) npm : 10.8.1 OS : Windows 10

Additional Information

No response

[sean-perkins]

Hello @Majstr in your application have you increased the font size of the datetime?

I would suspect based on the recorded video and the clipping of items that either:

• Reducing the font size of the options
• OR; increasing the height of the modal the datetime is rendered within

may resolve or avoid the issue of the scroll listener being triggered and it automatically scrolling to the next snappable option.

[Majstr]

@sean-perkins I guess users increased font on their device. But we didn't put any special CSS on modals for datetime. Should they expand by itself?

What is the easier fix for us? To put fixed font size on options?

[liamdebeasi]

This is possibly the same as https://github.com/ionic-team/ionic-framework/issues/29713 and https://github.com/ionic-team/ionic-framework/issues/25964.

[Majstr]

I fixed it for not to set zoom on the app to 100%. I thinks this is temporally solution. Popup should properly expand with font size.