Dismiss keyboard/remove focus on search bar after search?

Ionic Framework ionic-v3
1

Is there a way to dismiss the keyboard or somehow remove focus on the search bar after clicking search?

3 Likes
2

Finally I figured a way out! Hope this helps anyone who needs this.

The method is to use Renderer to invoke blur on the search input element.

onSearch(event) {
	this.renderer.invokeElementMethod(event.target, 'blur');
}

Remember to import Renderer from angular

import { Renderer } from '@angular/core';

9 Likes
3

Doesn’t seem to work in my case, the searchbar doesn’t have any event with name onSearch. In my case I have the search bar in the page title (so I am sure I am missing something).

4

Are you using ion-searchbar? If so, you can pass the event like this:

<ion-searchbar (search)="onSearch($event)"></ion-searchbar>

In fact, I’m now using another method, but the one above should be working as well.

The other method is to use keyboard plugin by simply calling

Keyboard.close()

FYI: https://ionicframework.com/docs/v2/native/keyboard/

1 Like
5

Got it! I was also actually trying to hook Keyboard plugin with some modification of your code in first comment. I was using event (onSearch) instead of (search). Working perfectly , thank you :slight_smile:

6

I have same problem, when i have this code:
“ionic-angular”: “2.0.1”,
“ionic-native”: “2.4.1”,

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home page</ion-title>
  </ion-navbar>
  <ion-searchbar debounce="10" (ionInput)="getItems($event)" (search)="onSearch($event)"></ion-searchbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

import {Component, Renderer} from '@angular/core';
import {NavController, MenuController, Keyboard} from 'ionic-angular';
@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    items:any;
    constructor(public navCtrl: NavController, public storage: Storage,
                public menuController: MenuController, private renderer:Renderer, public keyboard: Keyboard) {   }

    getItems(ev) {
        var val = ev.target.value;
        if (val && val.trim() != '') {
            this.items = this.items.filter((item) => {
                return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }

    onSearch(event) {
        //this.renderer.invokeElementMethod(event.target, 'blur');
        this.keyboard.close();
    }
7

You should call

Keyboard.close()

instead of this.keyboard.close()

8

When i use Keyboard.close() i have problem Property 'close' does not exist on type 'typeof Keyboard'. And when i give alert("test") on onSearch function that no written as if the function never called. :-/

I tested on iOS and browser.

9

Sorry, i had bad import Keyboard, but still not call function onSearch.

I have code:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home page</ion-title>
  </ion-navbar>
  <ion-searchbar debounce="10" (ionInput)="getItems($event)" (search)="onSearch($event)"></ion-searchbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

    import { Keyboard } from 'ionic-native';

    onSearch(event) {
            alert("test");
            console.log("test");
            Keyboard.close();
        }
10

I tested app on Android and there function right. This bug is olny on iOS!

11

This helped me a ton, thanks. This should be added to the searchbar docs.

12

This works, thanks a lot!

13

my project not run event (search)=“onSearch($event)”.

14

Just incase someone doesn’t manage to do it with this way, after fighting alot today, I’ve found a way where you can remove/set focus from anywhere. In my case I needed to do it when pressing the clear/cancel button and event.target was the button itself not the searchbar input.

So my solution for this is:

  1. Set the ID to your ion-searchbar, in my case I’ve used aaaaaaaaa

  2. Get a reference to it using the ID like this:

                   @ViewChild('aaaaaaaaa') myinput: Searchbar;
  1. Wherever you need it, call the following method with blur or focus as you need

this.renderer.invokeElementMethod(this.myinput._searchbarInput.nativeElement, 'blur');

Also if you wanna close the keyboard just declare this right after the imports, not inside the class: declare let Keyboard: any; and then you can close the keyboard with Keyboard.hide()

Cheers!

15

All you have to pass event in your function and call blur()

search(event) {
    event.target.blur();
}
6 Likes
16

Thanks !!
Worked Fine. :slight_smile:

17

I used this simple solution (without any imports). Just put a dummy button at the end of your HTML, like this:

<button id="dummyButton" ></button>

Then at your event triggered funtion you can use like this:

onSearch(event) {
    var dummyButton = document.getElementById('dummyButton');
    dummyButton.focus();	
}

This will focus on the button while unfosing the searchbar, therefore hiding keyboard on mobiles.