bug: ionChange event not triggered on v7 ion-searchbar

[guillaumesmo]

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

v7.x

Current Behavior

When typing in the ion-searchbar input, no ionChange event is triggered

changing the debounce property to undefined, 0 or another value doesn't help

only blurring the field triggers the event

Expected Behavior

from v7 migration guide: "ionChange is only emitted from user committed changes, such as typing in the searchbar"

Steps to Reproduce

Go to https://ionicframework.com/docs/api/searchbar#debounce

Search for "York", wait few seconds: nothing happens
blur the input: works as expected

Code Reproduction URL

https://ionicframework.com/docs/api/searchbar#debounce

Ionic Info

Ionic:

Ionic CLI : 6.20.6 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.0.2

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.7.0
@capacitor/core : 4.7.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v19.9.0 (/usr/local/Cellar/node/19.9.0/bin/node)
npm : 9.6.3
OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. Did you see the breaking changes guide for ion-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 or pressing the "Enter" key.

Source: https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#searchbar

If you want to detect keystrokes you should use ionInput instead. ionChange only fires once the searchbar has lost focus.

[guillaumesmo]

🤦 OK sorry for that I completely missed the second condition in that sentence

That being said, wouldn't it make sense to update the demo on the website to use ionInput instead of ionChange then? As the debounce isn't working there currently
https://ionicframework.com/docs/api/searchbar#debounce

[liamdebeasi]

No problem 👍

Yes, looks like that should be updated to use ionInput. I put up a PR to fix that here: ionic-team/ionic-docs#2913

[guillaumesmo]

I tried to contibute my 2 cents here but you were much faster 👍
https://github.com/ionic-team/ionic-docs/compare/main...guillaumesmo:ionic-docs:guillaumesmo-patch-1?expand=1

Thanks for the great work here

[liamdebeasi]

Thanks! I'll give you co-author credit when the docs PR merges.

[liamdebeasi]

I merged the docs fix in ionic-team/ionic-docs@eb79612 and gave you co-author credit. The change should be live on the docs website soon.

I am going to close this, but let me know if you have other questions.

[ntorrey]

@liamdebeasi The bit about the searchbar in breaking.md is still confusing. I had to read it a couple of times to get it. At first glance it seems to list the options for which the ionChange is emitted (1. typing in the searchbar, 2. The searchbar losing focus, 3. Pressing the Enter key), even though it is written correctly:
"...ionChange is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key."

Maybe it could be rewritten to:
"...ionChange is only emitted from user committed changes, (e.g. the searchbar losing focus after typing into it or pressing the "Enter" key after typing into it.)"

If I was confused maybe others could be too.

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