Hitting 'Enter' after typing in search bar (ion-searchbar) will trigger 'ionCancel'

[qingfx]

Short description of the problem:

When wrapped in <form></form> element, ion-searchbar will incorrectly trigger event ionCancel when user hits Enter or its equivalent (like an Action Button from iOS system keyboard). This will clear the user input, which is not expected.

Otherwise, when ion-searchbar is not wrapped in <form></form>, there is no issue and the user input stays after Enter key is hit, which is expected.

What behavior are you expecting?

Whenever user hits Enter, ios-searchbar should not clear input automatically, whether or not the said ion-searchbar is wrapped by a <form></form>.

Steps to reproduce:

1. Create a ion-searchbar wrapped in <form /> (sample code below, also shown in Plunker attached later)
2. Type some chacaters into search bar.
3. Hit Enter if viewed on Desktop; Hit Search if viewed on iOS Safari.

<ion-navbar primary *navbar>
  <form action="." method="get" (submit)="$event.preventDefault()">
    <ion-searchbar placeholder="First typing, then hit Enter key or iOS keyboard action button Search">
    </ion-searchbar>
  </form>
</ion-navbar>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

To give some background, the reason I want to wrap ion-searchbar inside a <form></form> is to make iOS Safari recognize the search bar and bring up the keyboard with blue action button Search. I'd like to know it if there is another way to archive this.

Upon investigation, the origin of such ionCancel event is the click event of the Cancel button for Android, which ion-searchbar has reserved in its template to support Material Design on applicable platforms. To verify this theory, please see the Plunker sample below to see detailed instructions.

Which Ionic Version? 1.x or 2.x

2.0.0-beta9

Plunker that shows an example of your issue

http://plnkr.co/edit/UlbuOJTbDIQfymNXIXag?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.2.0

Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
OS:
Node Version: v5.11.1


******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

[gxsjtu]

yes, please provide one way to dismiss keyboard when search finish.
'enter' hitting tiggers cancel event cause dismiss keyboard in submit fail.

[zengyun261]

+1
<button type="button" ...>

[jgw96]

Hello all! I have tested this with the latest nightly and cannot seem to reproduce this issue, which means that it will be fixed for the upcoming beta.11 release! If you would like to try the latest nightly you can simply run npm install ionic-angular@nightly. Thanks for using Ionic!

[lordgreg]

@jgw96 when I've tried to install nightly, it installed "ionic-angular": "^2.0.0-beta.9-201606271842" which, it seems as being older as beta10. However, I could still reproduce the issue with beta10. This issue should be reopened and not closed as soon as someone fixes it in nightly.

[lordgreg]

As of Ionic beta 11, this issue is still not fixed and as @jgw96 said, this wasn't fixed before beta 11 arrived. Please reopen this issue (@brandyscarney, @adamdbradley, @jgw96), since its still affecting form and ion-searchbar:

  <ion-toolbar no-border-top no-border-bottom>
    <form (ngSubmit)="submitSearch($event)">
      <ion-searchbar
        name="test"
        [(ngModel)]="formData.query">
      </ion-searchbar>
    </form>
  </ion-toolbar>

this will always clear the ion-searchbar input after we press the enter key, which is of course, false.

This is, pretty bad workaround:

  <form (submit)="submitSearch()">
    <ion-toolbar no-border-top no-border-bottom>
      <ion-searchbar
        name="test"
        [(ngModel)]="formData.query">
      </ion-searchbar>
      <ion-buttons hidden right>
          <button type="submit" small bg-primary blue>test</button>
      </ion-buttons>
    </ion-toolbar>
  </form>

submit button must be there, but I've set the hidden property on the ion-buttons to have the whole element as display: none.

[wsandoval93]

I'm having the same issue! Any fix to submit inside form without clear search bar?

[janein]

why has this been closed? I'm still experiencing this issue.

[lordgreg]

@janein its probably because @adamdbradley or @manucorporat updated the code. That means it is (hopefully) fixed in next version.

[janein]

Ok thanks. So I guess I have to wait for the next release until i can build my searchbar correctly.

[manucorporat]

yes, it was fixed here. 2e1bb4b