CODEWITHSUNDEEP
androidangulartypescriptcordovaionic-framework
Fearcoder
Fearcoder

Reputation: 788

Ionic 4 doesn't hide the keyboard after submit

I migrated my Ionic 3 app to Ionic 4. The problem is when I press the go button on the keyboard it doesn't close it. This is my code on the front-end: 

    <ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>2 variables</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content color="secondary" padding>
  <form (ngSubmit)="calculateTwo(value1, value2)">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label position="floating">value 1</ion-label>
            <ion-input name="value1" type="number" [(ngModel)]="value1"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label position="floating">Value 2</ion-label>
            <ion-input name="value2" type="number" [(ngModel)]="value2"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-button shape="round" expand="full" type="submit">calculate</ion-button>
  </form>
  <ion-card class="resultcard">
    <ion-card-header class="headercolor">
      Result
    </ion-card-header>
    <ion-card-content>
      {{result}}
    </ion-card-content>
  </ion-card>
</ion-content>

And this is my typescript file:

 calculateTwo(value1, value2) {
    this.result = "Result: " + (value1 * value2);
    this.keyboard.hide();
  }

I am testing it on my phone (Sony z2). I can move to the next input field but when I press GO it doesn't trigger the calculateTwo function. Also the keyboard doesn't hide.

This is my package.json file:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/admob-free": "^5.4.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/keyboard": "^5.4.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "cordova-admob-sdk": "0.24.1",
    "cordova-android": "^8.0.0",
    "cordova-plugin-admob-free": "0.26.0",
    "cordova-plugin-ionic-keyboard": "2.1.3",
    "cordova-promise-polyfill": "0.0.2",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.3.1",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.14.2",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },

In my ionic 3 app this was working good.

Can someone point me in the right direction?

Upvotes: 0

Views: 4885

Answers (1)

Diesel
Diesel

Reputation: 5355

Check out this bug report and this one.

Try putting (keyup.enter)="calculateTwo(value1, value2)" on each input you want to run on an enter event.

<ion-input 
    name="value1" 
    type="number" 
    [(ngModel)]="value1" 
    (keyup.enter)="calculateTwo(value1, value2)"
></ion-input>

...

<ion-input 
    name="value2" 
    type="number" 
    [(ngModel)]="value2" 
    (keyup.enter)="calculateTwo(value1, value2)"
></ion-input>

Documentation here

Upvotes: 2

Related Questions