From 35041b2f3c99135d292500a662b889bdaaec6876 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 20 Sep 2022 13:10:50 -0400
Subject: [PATCH] feat(input): debounce controls the timing to delay the
 ionInput event (#25969)

---
 BREAKING.md                         | 6 ++++--
 core/src/components.d.ts            | 4 ++--
 core/src/components/input/input.tsx | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 7d3233f1f4..32b5eb74e1 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -63,9 +63,11 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h4 id="version-7x-input">Input</h4>
 
-`ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus or from clicking the clear action within the input.
+- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus or from clicking the clear action within the input.
 
-If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
+  - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
+
+- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
 
 <h4 id="version-7x-overlays">Overlays</h4>
 
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 6812ab5fee..970f74c838 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1068,7 +1068,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce": number;
         /**
@@ -4857,7 +4857,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce"?: number;
         /**
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 293103a7a5..c465c4969e 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -92,13 +92,13 @@ export class Input implements ComponentInterface {
   @Prop() clearOnEdit?: boolean;
 
   /**
-   * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+   * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
    */
   @Prop() debounce = 0;
 
   @Watch('debounce')
   protected debounceChanged() {
-    this.ionChange = debounceEvent(this.ionChange, this.debounce);
+    this.ionInput = debounceEvent(this.ionInput, this.debounce);
   }
 
   /**