Searchbar Not Blurring

[duncanreid]

Short description of the problem:

RC1. Device: iOS 10.0.2.

This only happens when testing on the device, it works as expected while testing in Chrome.

Searchbar input will not blur when tapping anywhere outside of the component, so the keyboard will not go away and the ionBlur event is not firing. It will blur if you tap on a button or something else that gains focus. The only way I have been able to work around this is to add click listener directives to all of the elements around the Searchbar.

I notice that the Searchbar is using a normal input as opposed to an ion-input, so it also inhibits the cursor peekaboo effect where the cursor can still be seen while scrolling underneath fixed elements like headers.

What behavior are you expecting?

Tapping anywhere outside the Search bar will remove the keyboard and fire the (ionBlur) event.

Steps to reproduce:

1. Fire up a basic v2 tabs project
2. Add a Searchbar
3. Tap Searchbar input, tap anywhere outside after keyboard is shown.

Which Ionic Version? 1.x or 2.x
2.X RC1

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v6.2.2
Xcode version: Xcode 8.0 Build version 8A218a

[jgw96]

@manucorporat im thinking this is probably caused by the backrdop on iOS right?

[manucorporat]

@jgw96 I don't think so, hard to say without testing

[danielcrk-cn]

If it helps, the blurring works fine on Android but not on iOS.

[Xal3ph]

We are also observing this behavior in 2.x RC2

[biesbjerg]

Just to add to this issue, I'm seeing a delay (300ms tap delay?) when tapping the searchbar to gain focus, and similar when tapping clear or cancel.

EDIT: Not experiencing this in conference app - No idea why my app does this.

[Xal3ph]

We added (click)="return;" or (click)="{}" to the appropriate ion-content and this works as a good temporary solution for us.

[biesbjerg]

@Xal3ph Nice. That seems to workaround the issue for me too. Btw, do you also experience input is slow to get focus on tap? I played around with the tappable property, but it does not make a difference.

I have a same issue - searchbar not blurring.
ionic: 2.1.4
iOS 9.3

I couldn't understand the workaround. Add (click)="return;" to ion-content?

[Xal3ph]

@vincentgigandet Yes

<ion-content (click)="return;">

</ion-content>

or

<ion-content (click)="{}">

</ion-content>

@Xal3ph Thanks! It worked!

FYI
This produced error with below message when compile.

<ion-content (click)="return;"> 
(Property` 'return' does not exist on type 'MyPage')

but this worked.

<ion-content (click)="{}"> worked.

[comfortme]

very annoying issue.
in my app after user search, list of items are shown which items already have a click listener to push another page.
so users cant click anywhere to close keyboard.
keyboard is open, user scrolls and try to see the content through 100px window.