Ionic-framework: 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.

[vincentgigandet]

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>

[vincentgigandet]

@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.

[alexdruk]

@comfortme Exactly the same here!
Proposed by @Xal3ph workaround does not work
The issue was opened on Oct 27, 2 month from now, but does not fixed yet.
Could somebody from Ionic give us a time estimate when it will be fixed.

[ghenry22]

click events seem to hide the keyboard now for me, but scroll events don't so if the user wants to scroll through the filtered results to find what they want to click on the keyboard doesn't close, often meaning the user has a very small window to scroll. This fixes it for me:

<ion-content (ionScrollStart)="closeKB()">

then
closeKB(){ Keyboard.hide();}

this uses the ionic-native Keyboard module to hide the keyboard if the user starts scrolling.

[liuwenzhuang]

I have a similar issue - searchbar not blurring when scroll list, but click other part other than searchbar hide keyboard indeed.
ionic: 2.1.17
Android: 6.0.1/iOS 10.0.1

And there is my View Structure:

<ion-header>
  <ion-navbar>
  </ion-navbar>
  <ion-toolbar>
    <ion-searchbar>
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
    </ion-item>
  </ion-list>
</ion-content>

[ghenry22]

@liuwenzhuang I have posted simple steps just above to add a scrollStart listener and close the keyboard on scroll start. Just follow those.

[chuchuva]

This issue still occurs on Ionic Framework 3.5.2 both on iOS and Android. You can easily reproduce it by installing Ionic Conference app: https://play.google.com/store/apps/details?id=com.ionicframework.ionic2843511

[camillesaury]

It's only when you run on a device that the problem occur
With the screen cast for me. Disable it and its good again

[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.