bug: [iOS] ion-input cursor jumps to end on input

tetsuwanadam commented 2 years ago

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

Current Behavior

On iOS 15.3, in an ion-input with existing text, if you set the cursor at the beginning or in the middle of the existing text and type a character, the cursor jumps to the end of the input.

Expected Behavior

As you type the cursor should stay after the typed character, regardless of where in the input text you are typing.

Steps to Reproduce

In an ion-input with existing text, move the cursor to the beginning or middle of the text and type a character. I believe this issue arose either with the iOS 15.3 update or possibly the Ionic Vue 6.0.4 update.

Code Reproduction URL

https://github.com/tetsuwanadam/ionic-test/tree/ion-input-ios-cursor-issue

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.0.5

Capacitor:

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

Utility:

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

System:

NodeJS : v16.1.0 (/usr/local/bin/node) npm : 7.24.1 OS : macOS Big Sur

Additional Information

No response

liamdebeasi commented 2 years ago

Thanks! I can reproduce this behavior in iOS 15. This appears to be a bug in iOS, not Ionic.

The good news is this issue appears to be addressed in the iOS 15.4 beta. I will update this thread when that version of iOS has shipped.

sean-perkins commented 2 years ago

@liamdebeasi this appears to be a regression from this PR that I authored: https://github.com/ionic-team/ionic-framework/pull/24606

When updating the native input's value, the cursor position is being reset. I have verified that reverting that change, resolves this issue. I'll update the classification of this bug and see if there's a straightforward way to maintain the cursor position.

MilotH2 commented 2 years ago

I can confirm that this issue is happening on iOS Ionic Angular, any suggested quick fix for this? My iOS version is 14.7.1 I will update soon to 15.3 and will come back if it still happens. I think that on Ionic 5 this issue was not available, since i migrated to Ionic 6 this issue started to happen.

My Ionic Info:

Ionic:

   Ionic CLI                     : 6.18.1 (/Users/milothoxha/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.4
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (/Users/milothoxha/.nvm/versions/node/v16.13.1/bin/node)
   npm    : 8.1.2
   OS     : macOS Big Sur

EDIT: I updated to 15.3 and still the issue is there.

What I will try now is that I will create an Ionic v5 and Ionic v6 version and see if that the v6 might be the issue.

Unfortunately I was not able to create an older version of Ionic, it creates with the latest newest version the new project so whenever i downgrade it it gives errors.

What I will try is I will find an old project with v5 and try the input there.

I can confirm that on old Ionic version of V5 the input works as it should, while on new Ionic 6 project it does not work.

The first app is the working one and the second app is the buggy one, please check the video. I will open an issue for this also.

https://user-images.githubusercontent.com/55019464/153416752-e4993bfe-04f4-4cce-ae7d-8883152ab25e.mp4

Ionic V5 package.json

{
  "name": "twinstaff",
  "version": "0.0.1",
  "author": "Ionic Framework",

  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor-community/http": "^1.3.0",
    "@capacitor/android": "3.3.0",
    "@capacitor/app": "1.0.6",
    "@capacitor/core": "3.3.0",
    "@capacitor/device": "^1.0.6",
    "@capacitor/geolocation": "^1.1.3",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.1.3",
    "@capacitor/network": "^1.0.6",
    "@capacitor/status-bar": "1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@capacitor/toast": "^1.0.6",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/location-accuracy": "^5.36.0",
    "@ionic-native/network-interface": "^5.36.0",
    "@ionic/angular": "^5.5.2",
    "angular2-signaturepad": "^3.0.4",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-networkinterface": "^2.2.0",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-res": "^0.15.3",
    "ionicsignaturepad": "^1.0.1",
    "rxjs": "~6.6.0",
    "signature_pad": "^3.0.0-beta.4",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.3.0",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/googlemaps": "^3.39.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"
}

Ionic V6 Package version

{
  "name": "Umbau Manager",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/common": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@awesome-cordova-plugins/chooser": "^5.37.3",
    "@awesome-cordova-plugins/core": "^5.37.3",
    "@awesome-cordova-plugins/onesignal": "^5.37.3",
    "@awesome-cordova-plugins/photo-viewer": "^5.37.3",
    "@awesome-cordova-plugins/preview-any-file": "^5.37.3",
    "@capacitor/android": "3.3.3",
    "@capacitor/app": "1.0.7",
    "@capacitor/browser": "^1.0.6",
    "@capacitor/camera": "^1.2.2",
    "@capacitor/core": "3.3.3",
    "@capacitor/filesystem": "^1.0.6",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/ios": "3.3.3",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/splash-screen": "^1.2.0",
    "@capacitor/status-bar": "1.0.6",
    "@capacitor/storage": "^1.2.3",
    "@ionic/angular": "^6.0.4",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@types/googlemaps": "^3.39.12",
    "angular2-signaturepad": "^3.0.4",
    "com-sarriaroman-photoviewer": "^1.2.5",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-chooser": "^1.3.2",
    "cordova-plugin-preview-any-file": "^0.2.9",
    "cordova-res": "^0.15.4",
    "date-fns": "^2.27.0",
    "ng2-pdf-viewer": "^7.0.2",
    "onesignal-cordova-plugin": "^3.0.1",
    "rxjs": "~6.6.0",
    "signature_pad": "^4.0.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@angular/language-service": "~13.0.0",
    "@capacitor/cli": "3.3.3",
    "@ionic/angular-toolkit": "^5.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}

MilotH2 commented 2 years ago

@tetsuwanadam try downgrading to 6.0.0, that fixed it for me, or upgrading to latest version of Ionic/vue. @sean-perkins I can confirm, my issue is gone on @ionic/angular@6.0.0 version, i downgraded from 6.0.4 to 6.0.0 and the input now works.

I can also confirm that upgrading to @ionic/angular@6.0.7 to latest version it fixed this problem.

tetsuwanadam commented 2 years ago

@MilotH2 @sean-perkins Upgrading to 6.0.8 took care of it. Thanks!

ionitron-bot[bot] commented 2 years ago

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.

ionic-team / ionic-framework