Ionic 3 Крышки клавиатуры (накладки) Элемент фокусированного ионного ввода

Question

В настоящее время я использую ионную версию: 3.19.1, протестировал приложение на Android-устройстве и симуляторе. Вопрос в том, когда ионный ввод сфокусирован, появляется клавиатура и закрывает элемент ионного ввода меткой> количество <, которая фокусируется наit. </p>

<ion-grid>
  <ion-row>
    <ng-container>
      <ion-col>
        <div>
            <ion-item>
              <ion-label stacked>{{ question.label | translate }}</ion-label>
              <ion-input   [focus]="question.focus" "></ion-input>
            </ion-item>

             </div>
          </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

Я устанавливаю фокус на элементе программно с помощью директивы focus.

Я пробовал следующие вещи: установка позиции: начальная на элементах ion-col, также пробовал scrollAssist: true,autoFocusAssist: правда.Сделал переустановку cordova ionic-plugin-клавиатура и @ ionic-native / клавиатура

package.json:

    "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/http": "^4.7.0",
    "@ionic-native/in-app-browser": "^4.7.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/ms-adal": "^4.6.0",
    "@ionic-native/native-storage": "^4.7.0",
    "@ionic-native/network": "^4.6.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/sqlite": "^4.6.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/adal-angular": "^1.0.0",
    "@types/chance": "^1.0.0",
    "@types/odata": "^0.3.3",
    "adal-angular": "^1.0.17",
    "chance": "^1.0.16",
    "cordova-android": "~7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-advanced-http": "^1.11.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-ms-adal": "^0.10.1",
    "cordova-plugin-nativestorage": "^2.3.1",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.0",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "ng2-webstorage": "^2.0.0",
    "odata": "^0.3.8",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@ionic/app-scripts": "3.1.8",
    "change-case": "^3.0.2",
    "json2ts": "0.0.7",
    "typescript": "2.4.2",
    "xml-query": "^1.4.0",
    "xml-reader": "^2.4.3",
    "xml2js": "^0.4.19"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-ms-adal": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-network-information": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  },
  "config": {
    "ionic_webpack": "./src/config/webpack.config.js"
  }
}

пример с активной клавиатурой

пример с входным полем, который был покрыт

Answer 1

x.Html файл

<ion-grid>
  <ion-row>
    <ng-container>
      <ion-col>
        <div>
            <ion-item> 
              <ion-label stacked>{{ question.label | translate }}</ion-label>
              <ion-input  #Input></ion-input>
            </ion-item>

             </div>
          </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

x.ts файл

    import {Component} from '@angular/core';
    import {IonicPage, NavController, NavParams} from 'ionic-angular';
    import { Keyboard } from 'ionic-native';

    @IonicPage()
    @Component({
      selector: 'x',
      templateUrl: 'x.html',
    })
    export class XPage {

      @ViewChild('Input') xInput: TextInput;
      constructor(public navCtrl: NavController,
                  public navParams: NavParams) {}
        focusFun() {
            this.xInput.setFocus();
            Keyboard.show();
        }
    }