Ionic Keyboard is not open properly - ionic-framework

Question

I am creating a login screen in Ionic. The problem is that when I click on the input field to open the Keyboard, it's not opening.
Then I click outside on the input field and then click on the input field then the keyboard is visible OR I click on the input fields 3 to 4 times and after that the Keyboard is visible.
I want to open the keyboard when I click on the input field for the first time. I've implemented the focusing code but it is not working. Does anyone have any suggestions?
Here is the code
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example" version="1.0.21" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App Name </name>
<description>App Name</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashScreenDelay" value="0" />
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="android-windowSoftInputMode" value="adjustResize" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="true" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="UseSwiftLanguageVersion" value="4.2" />
<platform name="android">
<allow-intent href="market:*" />
<preference name="android-targetSdkVersion" value="28" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
</platform>
<platform name="ios">
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>To scan barcodes</string>
</edit-config>
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-device" spec="1.1.4" />
<plugin name="cordova-plugin-statusbar" spec="2.2.2" />
<plugin name="cordova-plugin-sslcertificatechecker" spec="5.1.0" />
<plugin name="cordova-plugin-certificates" spec="^0.6.4" />
<plugin name="cordova-plugin-http" spec="1.2.0" />
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic" spec="^2.0.4">
<variable name="APP_ID" value="e363211c" />
<variable name="CHANNEL_NAME" value="Production" />
<variable name="UPDATE_METHOD" value="background" />
<variable name="UPDATE_API" value="https://api.ionicjs.com" />
<variable name="MAX_STORE" value="2" />
</plugin>
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="cordova-plugin-x-socialsharing" spec="^5.4.0" />
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-datepicker" spec="0.9.3" />
<allow-navigation href="http://192.168.2.26:8100" />
<engine name="ios" spec="5.0.0" />
<engine name="android" spec="6.3.0" />
<engine name="browser" spec="5.0.4" />
</widget>
Package.json
{
"name": "App Name ",
"version": "1.0.21",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"preinstall": "./cordovaOverride.sh",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --prod",
"lint": "ionic-app-scripts lint",
"ionic:serve": "ionic-app-scripts serve"
},
"config": {
"ionic_source_map": "source_map"
},
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/app-preferences": "4.7.0",
"#ionic-native/barcode-scanner": "4.7.0",
"#ionic-native/core": "4.7.0",
"#ionic-native/date-picker": "4.7.0",
"#ionic-native/file": "4.7.0",
"#ionic-native/printer": "4.7.0",
"#ionic-native/social-sharing": "4.7.0",
"#ionic-native/splash-screen": "4.7.0",
"#ionic-native/sqlite": "4.7.0",
"#ionic-native/status-bar": "4.7.0",
"#ionic/pro": "1.0.16",
"#ionic/storage": "2.1.3",
"#zxing/library": "0.5.0",
"amazon-cognito-identity-js": "1.26.0",
"angular2-signaturepad": "2.6.1",
"aws-sdk": "2.156.0",
"cordova-android": "6.3.0",
"cordova-browser": "5.0.4",
"cordova-ios": "5.0.0",
"cordova-pdf-generator": "^2.0.8",
"cordova-plugin-add-swift-support": "^1.7.2",
"cordova-plugin-android-permissions": "^1.0.2",
"cordova-plugin-barcodescanner-browser-support": "7.1.22",
"cordova-plugin-certificates": "^0.6.4",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-http": "^1.2.0",
"cordova-plugin-ionic": "^2.0.4",
"cordova-plugin-printer": "^0.7.3",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-sslcertificatechecker": "^5.1.0",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.6.2",
"es6-promise-plugin": "^4.2.2",
"eslint-plugin-html": "2.0.1",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"moment": "^2.24.0",
"node-sass": "^4.9.4",
"phonegap-plugin-barcodescanner": "^7.1.2",
"rxjs": "5.4.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.3",
"#types/node": "8.5.1",
"json-loader": "0.5.7",
"typescript": "2.3.4",
"webpack": "3.8.1"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-android-permissions": {},
"cordova-plugin-sslcertificatechecker": {},
"cordova-plugin-certificates": {},
"cordova-plugin-http": {},
"cordova-plugin-file": {},
"cordova-pdf-generator": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic": {
"APP_ID": "e363211c",
"CHANNEL_NAME": "Production",
"UPDATE_METHOD": "background",
"UPDATE_API": "https://api.ionicjs.com",
"MAX_STORE": "2"
},
"ionic-plugin-keyboard": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-plugin-printer": {},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-datepicker": {}
},
"platforms": [
"ios",
"android",
"browser"
]
}
}
login.html
<!-- Page content inputs -->
<ion-content padding class="background">
<ion-list>
<!-- logo on top of page -->
<ion-item no-lines justify-content-center align-items-center>
<ion-row justify-content-center align-items-center>
<ion-col>
<div style="text-align: center">
<img align='center' src="assets/icon/logo.png" height="140px" width="180px">
</div>
</ion-col>
</ion-row>
</ion-item>
<ion-item no-lines
style="height:40px; user-select: auto; padding-right:16px;border-style: solid; border-width: 1px;border-radius:3px;border-color: #E3e3e3">
<ion-label color="dark" item-left>
<ion-icon name="md-mail"></ion-icon>
</ion-label>
<ion-input style="user-select: auto" class="text_style" type="email" placeholder="Email"
[(ngModel)]="userEmail" name="userEmail"></ion-input>
</ion-item>
<!-- Password Field with show/hide option controls-->
<ion-item no-lines
style=" user-select: auto; padding-right:16px; border-style: solid; border-width: 1px;border-radius:3px;border-color: #E3e3e3">
<ion-label color="dark" item-left>
<ion-icon name="md-lock"></ion-icon>
</ion-label>
<ion-input style="user-select: auto" class="ion-input" [(ngModel)]="password" type="{{type}}"
placeholder="Password" name="password"></ion-input>
<button class="ion-input-button" *ngIf="!showPass" ion-button clear color="dark" type="button" item-right
(click)="showPassword()">
<ion-icon name="md-eye-off"></ion-icon>
</button>
<button class="ion-input-button" *ngIf="showPass" ion-button clear color="dark" type="button" item-right
(click)="showPassword()">
<ion-icon name="md-eye"></ion-icon>
</button>
</ion-item>
<!--Forgot Password Link -->
<ion-row>
<ion-col>
<!-- <ion-item> -->
<ion-row>
<ion-checkbox [(ngModel)]="rememberLogin" (ionChange)="keepMeLogin()"
style="margin-top:13px; margin-right:5px; margin-left:16px"></ion-checkbox>
<ion-label style="text-align:left; font-size: 12px; padding-top:4px">Remember Me</ion-label>
</ion-row>
</ion-col>
<ion-col>
<button ion-button clear color="button-color" style="text-align:right; font-size: 12px"
(click)="forgotPassword()" float-right>Forgot Password
</button>
</ion-col>
</ion-row>
<!--Login Button -->
<button style="height:48px" ion-button full color="button-color" (click)="onLogin()">Log in</button>
</ion-list>
<!-- </ion-card-content>
</ion-card> -->
<!-- Create New Account Link -->
</ion-content>
<!--End content -->