From eb7961299dd63ce8933d4c5c0cd11ac2ae3aca12 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 13 Apr 2023 11:19:51 -0400
Subject: [PATCH] docs(searchbar): debounce uses ionInput (#2913)

Co-authored-by: guillaumesmo <guillaumesmo@users.noreply.github.com>
---
 docs/api/searchbar.md                                       | 2 +-
 .../v7/searchbar/debounce/angular/example_component_html.md | 2 +-
 .../v7/searchbar/debounce/angular/example_component_ts.md   | 2 +-
 static/usage/v7/searchbar/debounce/demo.html                | 6 +++---
 static/usage/v7/searchbar/debounce/javascript.md            | 4 ++--
 static/usage/v7/searchbar/debounce/react.md                 | 4 ++--
 static/usage/v7/searchbar/debounce/vue.md                   | 4 ++--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index bbca192fdb6..fde99f4f664 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -66,7 +66,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md';
 
 ## Debounce
 
-A debounce can be set on the searchbar in order to delay triggering the `ionChange` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
+A debounce can be set on the searchbar in order to delay triggering the `ionInput` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
 
 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md';
 
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
index 5a554a24551..4e69a179142 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_html.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-searchbar [debounce]="1000" (ionChange)="handleChange($event)"></ion-searchbar>
+<ion-searchbar [debounce]="1000" (ionInput)="handleInput($event)"></ion-searchbar>
 
 <ion-list>
   <ion-item *ngFor="let result of results">
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
index 1d8215ef1a5..834fb2b8dab 100644
--- a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -9,7 +9,7 @@ export class ExampleComponent {
   public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
   public results = [...this.data];
 
-  handleChange(event) {
+  handleInput(event) {
     const query = event.target.value.toLowerCase();
     this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
   }
diff --git a/static/usage/v7/searchbar/debounce/demo.html b/static/usage/v7/searchbar/debounce/demo.html
index 9fce8ff5f3a..e00c272091b 100644
--- a/static/usage/v7/searchbar/debounce/demo.html
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -36,9 +36,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
@@ -61,4 +61,4 @@
   }
 </script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
index 6a74446f699..647029fa341 100644
--- a/static/usage/v7/searchbar/debounce/javascript.md
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -10,9 +10,9 @@
   let results = [...data];
   filterItems(results);
 
-  searchbar.addEventListener('ionChange', handleChange);
+  searchbar.addEventListener('ionInput', handleInput);
 
-  function handleChange(event) {
+  function handleInput(event) {
     const query = event.target.value.toLowerCase();
     results = data.filter(d => d.toLowerCase().indexOf(query) > -1);
     filterItems(results);
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
index f46ce1a6da5..4d31276e0c1 100644
--- a/static/usage/v7/searchbar/debounce/react.md
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -6,7 +6,7 @@ function Example() {
   const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
   let [results, setResults] = useState([...data]);
 
-  const handleChange = (ev: Event) => {
+  const handleInput = (ev: Event) => {
     let query = "";
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
@@ -16,7 +16,7 @@ function Example() {
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
 
       <IonList>
         { results.map(result => (
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
index 2d85d6ed2d2..acb820af722 100644
--- a/static/usage/v7/searchbar/debounce/vue.md
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-searchbar :debounce="1000" @ionChange="handleChange($event)"></ion-searchbar>
+  <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
 
   <ion-list>
     <ion-item v-for="result in results">
@@ -22,7 +22,7 @@
       return { data, results };
     },
     methods: {
-      handleChange(event) {
+      handleInput(event) {
         const query = event.target.value.toLowerCase();
         this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
       },