Ionic-framework: ion-searchbar adn IOS keyboard closing issue

[jamalsleman]

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
No way to close keyboard on iphone when using ion-searchbar

Expected behavior:
when clicking return " on keyboard" => keyboard will be hide

Steps to reproduce:
here is example ( you can take it from your demo)



{{ item }}

Explanation:

on Iphone when you click on search bar, you can use the keyboard
after typing each key page will refesh the list, but i cannot hide the keyboard all all ( till i go to other page).

We just want to give user option to hide the keyboard,
Important i donot want to close keyboard while typing ( we donot know when he finish typing).

Adding cancel button will hide the keyboardwhen user click it but i is also cancel the search and it is not good for us.

[jgw96]

Thanks, we will look into this.

[steveacalabro]

+1 The search bar seems to be a very broken version of the regular input

[filipsuk]

This is really annoying issue and makes searchbar quite unusable on iOS.

My hacky workaround that seems to do the trick:

onClear() {
      if (this.platform.is('ios')) {
        this.keyboard.onKeyboardShow().take(1).subscribe(() => {
          this.keyboard.close();
        });
      }
  }

[guoyongxin]

Any updates? I still face this issue on 3.9.2

[JasonAsmk]

Experiencing the same issue. I'm using the recommended cordova-plugin-ionic-keyboard which does not allow for hide and show on iOS so I can't even hook to the (keyup.enter) event.

[estacks]

Some click event is triggering multiple times to hit anything under the Cancel button, like the search bar itself to bring the keyboard back up. Unlike most event bubbling this is actually several events firing, stopping the first one does nothing. Probably fastclick then a regular click.

This lame hack works for me:

onClear() {
    if (this.platform.is('ios')) {
      let element = this.el.nativeElement.querySelector('.searchbar-input');

      element.style.pointerEvents = 'none';

      setTimeout(() => {
        element.style.pointerEvents = 'auto';
      }, 350);
    }
}

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/195