bug: iOS "Go" Button Does Not Trigger search Event in ion-searchbar

[ThisIsDavidHan]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

The search event is not triggered upon pressing the "Go" button, leading to no search action being performed.

We've identified a consistent issue across our iOS devices where the "Go" button on the iOS keyboard does not trigger the search event in ion-searchbar. This behavior diverges from expectations and from the behavior on other platforms, where entering text and pressing the "Enter" key (or equivalent) triggers the search action as intended.

Expected Behavior

The search event is triggered when the "Go" button is pressed, invoking the performSearch method.

Steps to Reproduce

1. Implement an ion-searchbar with a search event listener in an Ionic Angular app.

<ion-searchbar inputmode="search"
  [(ngModel)]="search" 
  (search)="performSearch(search)"
  placeholder="Search">
</ion-searchbar>

2. Run the app on an iOS device or emulator.
3. Enter text into the search bar and press the "Go" button on the iOS keyboard.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI: 7.1.6
Ionic Framework: @ionic/angular 6.1.11
@angular-devkit/build-angular: 13.3.8
@angular-devkit/schematics: 13.3.8
@angular/cli: 13.3.0
@ionic/angular-toolkit: 6.1.0

Capacitor:

Capacitor CLI: 3.4.3
@capacitor/android: 3.4.3
@capacitor/core: 3.4.3
@capacitor/ios: 3.4.3

Utility:

cordova-res: installed globally
native-run (update available: 2.0.1): 1.6.0

System:

NodeJS: v18.16.0
npm: 9.5.1
OS: macOS

Additional Information

Workaround

As a temporary solution, we switched to using the keyup event to detect when the "Enter" key is pressed, which corresponds to the "Go" button on iOS:

<ion-searchbar
    inputmode="search"
    [(ngModel)]="search" 
    (keyup)="onSearchKey($event)"
    placeholder="Search">
</ion-searchbar>

And added a method to handle the keyup event:

onSearchKey(event: KeyboardEvent): void {
  if (event.key === 'Enter') {
    performSearch(this.search);
  }
}

Suggested Fix

An investigation into why the search event is not being triggered by the "Go" button on iOS could lead to a more intuitive and consistent cross-platform experience. Adjusting the ion-searchbar component to ensure the search event is reliably triggered on all platforms would be an ideal resolution.

[thetaPC]

Thank you for submitting the issue!

I've tried to reproduce the problem you mentioned using the latest supported version, which is v7. However, I wasn't able to encounter the issue. Could you please let me know if you're still experiencing it on v7? If you need assistance with updating to version 7, you can find the update guide on the Ionic Framework site.

[sean-perkins]

@ThisIsDavidHan the search event is a non-standard and not recommended: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event

The search/go button on iOS is equivalent with pressing the ENTER key on the keyboard. It also has the same function and will submit a form that the search is within.

The workaround is the expected behavior.

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