Dismiss keyboard when tapping out of SearchBar/TextField


#1

Sometimes users click on a textfield or searchbar but don’t have any input and just want to continue using the app. But hey what the heck? The keyboard is still there expecting some input. This is annoying so we want to dismiss the keyboard whenever a user uses a gesture.

This example is for using a SearchBar but could easily be used for any input field which triggers the keyboard.

Let’s say we have a simple SearchBar :

<SearchBar id="searchbar" hint="Search..." (loaded)="searchBarLoaded()" (submit)="search($event)" (clear)="onClear()"></SearchBar>

Now in your component import gestures and Page
import * as gestures from "ui/gestures";
import { Page } from "ui/page";

In your constructor
constructor(private page: Page,

Have a reference to the searchbar like so :
let searchbarComponent: SearchBar = <SearchBar>this.page.getViewById("searchbar");

Now here comes the fun part.

var observerTap = this.page.observe(gestures.GestureTypes.tap, function (args) { console.log("Page tapped"); searchbarComponent.dismissSoftInput(); })

You observe the page if a gesture is triggered and then appropriately dissmiss the keyboard. You could do this for every Gesture Type.

Have fun!


#2

I tried this before but there’s a problem when observing gestures on a parent of SearchBar. Doing it this way and you hit the search bar again after focusing, instead of outside (Page), it refocuses on the search bar and directly after gets dismissed. It’s a double hit since you hit the SearchBar AND Page when tapping on the search bar itself.

Another problem is that you cannot navigate through written characters since it will always refocus the search bar.


#3

@NordlingArt Hmm I don’t seem to experience these problems. :(. Can you maybe make a plunker to reproduce these issues?