ionic 2: ion-searchbar doesn't open search keyboard on iOS

[mbrookson]

On iOS, using the ion-searchbar component doesn't open the search keyboard type.

I have done some reading and seem to have found that since iOS 8, <input type="search" /> needs to be wrapped in a <form> tag for the correct keyboard to be displayed.

You can fix this keyboard issue like so:

<ion-toolbar>
  <form>
    <ion-searchbar class="product-searchbar" [type]="search" (ionInput)="searchByTerm($event, searchTerm)" [(ngModel)]="searchTerm" [debounce]="800" [showCancelButton]="true"></ion-searchbar>
  </form>
</ion-toolbar>

However, this then leads to another issue which is that the Search button on the native keyboard then triggers the cancel event and doesn't close the keyboard by default, see #7010

Would be great to see this in the next release since it seems like the search doesn't quite contain full search functionality

Thanks!

[manucorporat]

@mbrookson I will close this as a "won't fix" since we can't include a <form> inside <ion-searchbar> because it could break tons of existing implementations.

However, this then leads to another issue which is that the Search button on the native keyboard then triggers the cancel event and doesn't close the keyboard by default, see #7010

^ this will be fixed next version! so no problem to use <ion-searchbar> inside your own <form>.

[arturalkaim]

Hi!
I'm having this issue with the ion-searchbar.
The keyboard just don't go away, with or without a surrounding <form>.

No answer for this.keyboard.close(); and console.log("keyboard open:", this.keyboard.isOpen()); always prints true.

Any info that could fix this?

Your system information:
Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.6
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.1
ios-deploy version: 1.9.0 
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[anjum121]

        <form action=".">
                <ion-searchbar
                        [(ngModel)]="searchKey"
                        [ngModelOptions]="{standalone: true}"
                        [showCancelButton]="true"
                        (search)="searchWithKeyword(activeTab)"
                        (ionCancel)="onCancel($event)"
                        [placeholder]="somePlaceHolder"
                        [animated]="false"
                        [value]=""
                        name="search"
                >
                </ion-searchbar>
            </form>

I have used form with action="." which is working

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