Ion-input loses focus while using bluetooth keyboard

Question

I am working on entering text with Hardware keyboard(Bluetooth connected) connected to iPhone(iOS 9 and iOS 10) in Ionic 3. While entering, The input is losing its focus and even if i try to enter again, It is not taking any input from keyboard. This hardware keyboard is working well in Android phone but not in iOS.

I tried upgrading/re-installing updated keyboard plugin from Cordova. But no luck with that.

The below is my Ionic Info.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

Global Packages:

cordova (Cordova CLI) : 6.5.0

Local Packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.1.2 browser 4.1.0 ios 4.1.1
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.1
ios-sim    : 5.0.13
Node       : v7.4.0
npm        : 5.0.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b

Misc:

backend : pro

If any ideas, Please let me know. Thank you.

EDIT

I tried with downgrading Ionic from 3.12 to 2.18. Still no luck. Input field still looses focus within milliseconds.

Allyl

Did you ever solve this issue? – Barge

Answer 1

Install the Keyboard plugin. In app.components.ts 's constructor :

platform.ready().then(() => {
   keyboard.hideKeyboardAccessoryBar(false);
});

Randee

Answer 2

There are couple of things that need to be verified here , issue you are facing is something that is related to the WebViews especially for the iOS , so let's start from the Keyboard, try to install the ionic-plugin-keyboard

cordova plugin add ionic-plugin-keyboard --save

if you need more events related to how you want to trigger the Keyboard events refer the official doc

i generally use the ionic-wkwebview rather than going with the in build webview of iOS which resolves most of the problem. You can install the plugin as follows:

ionic cordova plugin add cordova-plugin-ionic-webview --save

For complete installation refer the ionic-wkwebview-official doc

Even for the ionic-plugin-keyboard , there was issue with the ion-input but it was resolved and issue is not with the plugin but with the Webview,

Here is the reference to that issue which got resolved .

Steels

thanks for the answer. Tried with webview plugin, still same issue. – Innis

@Innis did you tried installing the ionic key board also? – Steels