Keyboard opens after clicking on empty space

Question

I have a strange problem with my app built with Ionic 1.3.2 that is happening only on iOS.

When I click on a textarea input the keyboard opens as usual, this part works as expected and the input element gets focus.

However, when I click on certain areas of the screen outside of any inputs, like 20px below of a text field that I have, the keyboard either opsn or closes and re-opens immediately if it's already open but the input doesn't get focus and document.activeElement actually returns the body element (checked in Safari inspector).

So in this mode I can type whatever I want but the entered text doesn't appear anywhere as if I'm typing into nowhere (which is a little strange).

Moreover, if I click 2-3 times in one of those places the whole app crashes with EXC_BAD_ACCESS inside some UIWebView internals:

* thread #1: tid = 0x35ea78, 0x000000010c2c3acb libobjc.A.dylib`objc_msgSend + 11, queue = 'com.apple.main-thread', stop reason = EXC_BAD_ACCESS (code=EXC_I386_GPFLT)
  * frame #0: 0x000000010c2c3acb libobjc.A.dylib`objc_msgSend + 11
    frame #1: 0x000000010ec56024 UIKit`-[UITextInteractionAssistant(UITextInteractionAssistant_Internal) swallowsDoubleTapWithScale:atPoint:] + 264
    frame #2: 0x000000010ea4ce75 UIKit`-[UIWebDocumentView shouldSelectionAssistantReceiveDoubleTapAtPoint:forScale:] + 91
    frame #3: 0x000000010f1b930a UIKit`_UIWebDoubleTapAtLocation + 369
    frame #4: 0x000000010ec3d409 UIKit`-[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:] + 57
    frame #5: 0x000000010ec451a8 UIKit`_UIGestureRecognizerSendTargetActions + 109
    frame #6: 0x000000010ec42c77 UIKit`_UIGestureRecognizerSendActions + 227
    frame #7: 0x000000010ec41f03 UIKit`-[UIGestureRecognizer _updateGestureWithEvent:buttonEvent:] + 891
    frame #8: 0x000000010ec2df7e UIKit`_UIGestureEnvironmentUpdate + 1395
    frame #9: 0x000000010ec2d9c3 UIKit`-[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:] + 521
    frame #10: 0x000000010ec2cba6 UIKit`-[UIGestureEnvironment _updateGesturesForEvent:window:] + 286
    frame #11: 0x000000010e772c1d UIKit`-[UIWindow sendEvent:] + 3989
    frame #12: 0x000000010e71f9ab UIKit`-[UIApplication sendEvent:] + 371
    frame #13: 0x000000010ef0c72d UIKit`__dispatchPreprocessedEventFromEventQueue + 3248
    frame #14: 0x000000010ef05463 UIKit`__handleEventQueue + 4879
    frame #15: 0x000000010c819761 CoreFoundation`__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    frame #16: 0x000000010c7fe98c CoreFoundation`__CFRunLoopDoSources0 + 556
    frame #17: 0x000000010c7fde76 CoreFoundation`__CFRunLoopRun + 918
    frame #18: 0x000000010c7fd884 CoreFoundation`CFRunLoopRunSpecific + 420
    frame #19: 0x0000000111fc8a6f GraphicsServices`GSEventRunModal + 161
    frame #20: 0x000000010e701c68 UIKit`UIApplicationMain + 159
    frame #21: 0x000000010aa7bd81 MyApp`main(argc=1, argv=0x00007fff55184680) + 65 at main.m:32
    frame #22: 0x000000010e42f68d libdyld.dylib`start + 1

Anybody knows how to fix this?

I'm using Ionic 1.3.2. This doesn't seem to be an issue with the Ionic Keyboard plugin because the same happens even if I remove it.

Edit (How to reproduce):

Here is a sample project that you can use to reproduce this issue (KeyboardBugRepro.zip). You will need to do the following in order to run it after you extracted the archive:

1. Install Node.js. If you're using Hombrew run brew install node
2. Install Ionic and Cordova globally with npm: npm install -g ionic cordova
3. If may be necessary to run "ionic prepare" before running the project, but you can skip to the next step initially and see if it works.
4. Run ionic emulate ios. This will launch an iPhone SE simulator and start the app.
5. Make sure you disabled hardware keyboard in simulator options (Hardware -> Keyboard > uncheck Connect hardware keyboard).

When the app starts you will see a login screen. Now click somewhere slightly below the password input and observe how the software keyboard opens but the input is not focused. But if you click on the input directly it gets focused. Clicking on empty space will close the keyboard.

To reproduce the crash just do the same multiple times in a row very fast, 2-3 clicks is usually enough.

To run the project from Xcode simply open the project generated by ionic in <project>/platforms/ios/KeyboardBug.xcodeproj and hit Run.

Answer 1

To remove the keyboard you need to lose the focus on your input.

document.activeElement.blur();

With this line you remove the focus and the keyboard disappear.

In your case, it's possible to add an event on your body, and stop opening keyboard again if you click out of an input.

$(document).ready(function () {
  $('body').click(function () {
    document.activeElement.blur();
  });

Answer 2

Remove all eventListeners and check. I think that in one of them have a place some collision, which activate "bugs".