Ionic-framework: iOS: Input fields don't loose focus when clicking outside

[mhartington]

_From @flavordaaave on January 7, 2016 11:16_

How to reproduce:
1) Run the ionic-conference-app on a native iOS device (or emulator)
2) Open the login form from the side-menu
3) Tap into one of the inputs (e.g. username)
4) Tap on the ionic logo above (or anywhere outside the input)
=> Input remains focused and keyboard stays up

Expected behavior:
=> Input looses focus and keyboard slides out.

_Copied from original issue: driftyco/ionic2#885_

[dylanvdmerwe]

I think this is kind of important. The keyboard cannot be dismissed on iOS during form capture. Is there any chance this can be moved into beta 4? Or is there a work around available?

Note that this happens on the iOS simulator and iOS devices.

[EvanWillms]

@dylanvdmerwe: I ended up kludging a very blunt-force workaround when this issue came up in my user testing a few weeks ago. I can't say I recommend it and it almost certainly has problematic side-effects. But just in case the idea is helpful:

I added a click handler to my outermost ion-content directive that forcibly blurs any active text input field, so taps on the page background result in the desired outcome of removing focus from an input field and dismissing the keyboard.

Be warned that limited testing has already revealed that event bubbling defaults are very different on Android, where this caused inputs to be unselectable. The click event to focus an input was passed through to the parent directive which immediately unfocused it again.

  blurActiveInput() {
    if (!this.platform.is("iOS")) return;

    var activeElement = document.activeElement;
    if(activeElement.tagName == "INPUT" || activeElement.tagName == "TEXTAREA") {
      activeElement.blur();
    }
  }

[DrakeWitt]

I am having this happen with the search bar in the latest beta.

[jesusbotella]

I am currently experiencing this issue in 2.0.0-rc2 :(. It is only happening on iOS 10 but not on Android.

[Xal3ph]

@jesusbotella did you find a solution to this? This makes the app mostly unusable. We may just downgrade to rc1 until this is resolved.

[paulparton]

I having this same issue with rc1 and rc2

[bmagni]

Same problem here on IOS with :

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4

[jesusbotella]

@Xal3ph I used the solution provided by @EvanWillms, but unfortunately, I didn't find any other solution :(

[willynilly]

Same issue.

[wagner18]

Same issue here, and I am really concerned about making workarounds with that kind of basic UI behaviors, specially if you are targeting more then one platform, which all of us probably do.

The team have any suggestion or any position about this issue?

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: OS X El Capitan
Node Version: v4.4.0
Xcode version: Xcode 8.1 Build version 8B62

[mhartington]

We have not been able to replicate this in our test. Can someone please open a new issue with all the required information on how to replicate

[cmorbitzer]

I can only reproduce this in a private project. However, I was able to fix it by binding to the click event on <ion-nav> in app.html. For example:
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" (click)="return"></ion-nav>

I don't have the time to debug this myself now, but this suggests that there is a race condition of some sort causing this bug.

Ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[peterpeterparker]

Same here. My workaround (I've got my input in a footer and nothing selectable in my content):

<ion-content (click)="closeKeyboard()">

closeKeyboard() {
    Keyboard.close();
}

[ChrisEelmaa]

Same here.

Repro here:

ionic start MyIonic2Project sidemenu --v2

throw in a input in to the content:

<ion-content padding>
  <p>
    <input type="text"
    placeholder="Hello?">
  </p>
</ion-content>

clicking anywhere won't lose the focus on the input. so it's basically impossible to close it.

Ionic Info:

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0 
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.0.0
Xcode version: Xcode 8.3 Build version 8E162

iPhone6

used the same work around as @cmorbitzer

[knicholes]

Wait, seriously? This hasn't actually been fixed in the framework?

[dylanvdmerwe]

There are a whole bunch of updates coming soon to ionic that deal with keyboard and inputs. Also, make sure to use the wkwebview plugin for iOS.

[jorgemejia]

I used wkwebview plugin and it solves this issue but this plugin have an issue with the http request :( is there any solution for this ?

[turigeza]

Has this got anything to do with Ionic ? This is a bug I find with safari on ios.

Once you focus on an input field or text field safari will not blur the element unless you click/touch another focusable element or you click the "Done" button on iphone or "keyboard close" button on ipad.

iOS 11.2.1 Phone
iOS 11.0.3 iPad

I would consider this a bug with iOS and safari but I would imagine in their eyes it is a feature : )

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.