Repository navigation
bug: ion-datetime wheel roll autmaticaly on some androids #29752
Description
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
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.
4570585878989512385messenger_creation_9962fc1e-1db0-4ed1-a30b-9de54ada91be.mp4
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
4570585878989512385messenger_creation_9962fc1e-1db0-4ed1-a30b-9de54ada91be.mp4
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
Activity
sean-perkins commentedon Aug 7, 2024
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:
may resolve or avoid the issue of the scroll listener being triggered and it automatically scrolling to the next snappable option.
Majstr commentedon Aug 8, 2024
@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 commentedon Aug 9, 2024
This is possibly the same as #29713 and #25964.
Majstr commentedon Aug 22, 2024
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.
dragermrb commentedon Oct 29, 2024
Any workaround for this?
harpster604 commentedon Mar 5, 2025
Any update on a fix for this issue?
thetaPC commentedon May 20, 2025
Thank you for the issue!
Closing this issue as it's a duplicate of #29713. I recommend subscribing to the original issue for updates.
ionitron-bot commentedon Jun 19, 2025
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.