Ionic input item shows no caret on iOS


#1

I have an ionic 3 app. On a page I have a form with some fields.

    <form>
        <ion-item>
            <ion-label>First item</ion-label>
            <ion-input type="text" [(ngModel)]="title" name="title"></ion-input>
        </ion-item>
        ... some more simple fields ...
        <ion-item>
            <ion-label>Item below keyboard region</ion-label>
            <ion-textarea [(ngModel)]="description" name="description"></ion-textarea>
        </ion-item>
        <button ion-button type="submit" block>Add Todo</button>
    </form>

When I tab the first, the keyboard is shown and the input item is properly focussed, that is: shows a blinking caret.

Though, when I click a field at a position below the area needed to show the keyboard, I do not get a caret, although the field is actually focussed. When I type, the karakters are put in the field.

The main difference is that when clicking on the lower field, the form is shifted upwards when the keyboard shows.

How to fix this?

I am running the app on an iPad 2017, iOS 11.2.2.

package.json:

{
  "name": "my app",
  "version": "1.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build --release",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@ionic-native/app-version": "^4.5.2",
    "@ionic-native/calendar": "^4.3.2",
    "@ionic-native/call-number": "^4.4.2",
    "@ionic-native/camera": "^4.3.2",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/date-picker": "^4.4.2",
    "@ionic-native/file": "^4.4.2",
    "@ionic-native/in-app-browser": "^4.3.3",
    "@ionic-native/keyboard": "^4.4.2",
    "@ionic-native/media-capture": "^4.4.0",
    "@ionic-native/native-page-transitions": "^4.3.2",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/pro": "^1.0.9",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "^9.1.0",
    "@ngx-translate/http-loader": "^2.0.1",
    "call-number": "^1.0.1",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-ios": "^4.5.4",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-calendar": "^4.6.0",
    "cordova-plugin-camera": "^2.4.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.0",
    "cordova-plugin-inappbrowser": "^1.7.2",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-media-capture": "^1.4.3",
    "cordova-plugin-privacyscreen": "^0.4.0",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.3.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-windows": "^5.0.0",
    "intl": "^1.2.5",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "ng2-datepicker": "^2.2.1",
    "plist": "^2.1.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "cors": "^2.8.4",
    "typescript": "2.4.2",
    "ws": "3.3.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "com.telerik.plugins.nativepagetransitions": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-calendar": {
        "CALENDAR_USAGE_DESCRIPTION": "This app uses your calendar to plan sessions."
      },
      "cordova-plugin-privacyscreen": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-media-capture": {
        "CAMERA_USAGE_DESCRIPTION": " ",
        "MICROPHONE_USAGE_DESCRIPTION": " ",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-datepicker": {},
      "mx.ferreyra.callnumber": {},
      "cordova-plugin-statusbar": {},
      "call-number": {},
      "cordova-plugin-file": {
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "This allows",
        "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "This allows",
        "FILE_USAGE_DESCRIPTION": "This app uses your files to upload on sessions.",
        "CAMERA_USAGE_DESCRIPTION": " ",
        "MICROPHONE_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-app-version": {}
    },
    "platforms": [
      "windows",
      "ios"
    ]
  }
}

app.module.ts:

...
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp, {scrollAssist: false, autoFocusAssist: 'delay'})
],

in app.component.ts:

this.platform.ready().then(() => {
    console.log('Platform is ready!');
    this.keyboard.disableScroll(false);
    ...

thanks!


#2

I have exactly the same issue. Did you find a workaround to fix the caret?


#3

We’re also having this issue, have tried a variety of options in:

IonicModule.forRoot(MyApp, {
      mode: 'ios', // Available options: "ios", "md", "wp".
      tabsPlacement: 'top',
      statusbarPadding: false,
      scrollAssist: false,
      autoFocusAssist: false
    }

As well as trying different versions of ionic webview and keyboard plugins to no avail.


#4

I have a hackish solution. See https://stackoverflow.com/questions/48321152/ionic-3-input-item-shows-no-caret-on-ios. Use at your own risk :wink:


#5
window.addEventListener('native.keyboardshow', function () {
    document.body.classList.add('keyboard-opened');
    /*
     * This code is a hack to fix the cursor issue.
     * When we click on the input field and keyboard appears, the cursor most of the time is not on the right position.
     * It simply needs to refresh UI once. There was no solution to this problem, so I tried a hack, and it worked. ;)
     * i.e. disable it for 10 micro secs and then re-enable it.
     */
    if (document.activeElement.nodeName === 'INPUT') {
        setTimeout(function (){
            document.activeElement.disabled = true;
            setTimeout(function () {
                document.activeElement.disabled = false;
            }, 10);
        }, 350);
    }
});

I fixed the caret issue this way. Although this is a hack, but fixed for me. :wink: