bug: ion-searchbar does not fire ionChange event on user input

[lincolnthree]

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

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

Currently, the ionChange event is only fired from ion-searchbar when ENTER is pressed or when the input is blurred. From what I can understand, this is inconsistent with the new documentation, or the new documentation is confusing.

The migration guide states:

Searchbar

ionChange is no longer emitted when the value of ion-searchbar is modified externally. ionChange is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus.

If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using ionInput instead.

Expected Behavior

While this documentation alludes to changes in the criteria for ionChange being fired, the phrase "such as typing in the searchbar" is vague and I don't believe it accurately represents the true state of the changes. This should read, "such as the user pressing enter, submit, and the searchbar losing focus".

In short, I think that either the ionChange event should fire on user keystrokes after the debounce time like before, or the documentation should be updated to reflect the actual state of the version 7 component. I'm not sure which is intended based on how the docs read currently.

Steps to Reproduce

Use the Ionic Version 7 search bar
Type in it
ionChange events are not fired on keystrokes, but only on enter/submit or blur

Code Reproduction URL

No response

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 6.20.3 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.0.0-dev.11676644846.156e8507
@angular-devkit/build-angular : 15.1.6
@angular-devkit/schematics : 15.1.6
@angular/cli : 15.1.6
@ionic/angular-toolkit : 8.0.0

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node)
npm : 8.3.1
OS : macOS Monterey

Additional Information

I have not checked the other inputs yet, but I suspect there may be similar documentations with ion-input and ion-textarea, though I can't say for sure. Just guessing.

[lincolnthree]

A thought... It would be nice if the (ionInput) event also included event.detail.value as a snapshot of the value of event.target.value -- unless you feel it is safe to reach directly into the DOM. But given the DOM's value could change, subsequent async code given a reference to the event itself might lead to referencing values that differ from those at the time the event was fired.

This would also make the migration much simpler, as name of the value-carrying attribute wouldn't be changing between the two events.

[liamdebeasi]

Thanks for the report. Looks like the native change event also fires when committed via the "Enter" key, so we should update the docs to note this.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26831, and a fix will be available in an upcoming release of the Ionic Framework v7 beta. The ionInput event on ion-searchbar will now emit a consistent payload (value and event), and I've clarified the docs for ionChange. Thanks again!

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