Clicking anywhere near button or input causes keyboard to open on iOS

ionic-v1
1

I came across a strange issue on iOS:

if I click on empty space somewhere near an input or button (within approximately 20px radius) the keyboard will open but the input will not gain focus. If I type anything with the keyboard nothing really happens, I only see text suggestions at the top.

Moreover, if the keyboard is already open and I do the same thing, it closes as usual but re-opens immediately after that.

Even worse, if I double click instead the whole app will crash, with stack trace going somewhere deep inside UIKit and ObjC runtime (crash happens in objc_msgSend).

This basically happens on every screen where I have text fields.

Has anybody had this problem?

2

I have same problem… Couldn’t fix yet…

3

Just ran into this same issue. Although I could not reproduce the part where a double click causes the app to crash.

Here is how I fixed it.

This solution relies on https://github.com/driftyco/ionic-plugin-keyboard
(automatically installed with all Ionic Apps)

In a global controller -

window.addEventListener('native.keyboardshow', keyboardShowHandler)

function keyboardShowHandler (e) {

  // prevent a bug where click near input causes keyboard to pop up but input is not focused

 if (document.activeElement === document.body) {
   window.cordova.plugins.Keyboard.close()
 }
}

I was actually very surprised that this fixed it. I was expecting that the keyboard would open (or at least start opening), and then close again after the javascript detected that an input element was not focused. But it actually prevented the keyboard from coming up entirely.

Here is a similar alternate solution which also worked for me.

var activeElement = document.activeElement

if (activeElement.nodeName !== 'INPUT' && activeElement.nodeName !== 'TEXTAREA') {
  window.cordova.plugins.Keyboard.close()
}
4

Hi all,
this is the working solution for anyone uses the newest version of keyboard plugin: https://github.com/ionic-team/cordova-plugin-ionic-keyboard

window.addEventListener('keyboardWillShow', function () {
    if (ionic.Platform.isIOS() || ionic.Platform.device().platform === 'iOS') {
        if (document.activeElement === document.body) {
            Keyboard.hide();
        }
    }
});

Even for me the problem only exists for iOS.