feat(input, textarea): change default debounce to undefined (#26073)

Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

BREAKING.md

@@ -97,6 +97,8 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 - 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`.
 
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
 - The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
 
 <h4 id="version-7x-modal">Modal</h4>
@@ -175,6 +177,10 @@ Developers using these components will need to migrate to using Swiper.js direct
 
 - 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`.
 
+- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
+
+- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
+
 - The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
 
 <h4 id="version-7x-toggle">Toggle</h4>

core/api.txt

@@ -533,7 +533,7 @@ ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-input,prop,debounce,number,0,false,false
+ion-input,prop,debounce,number | undefined,undefined,false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
@@ -1301,7 +1301,7 @@ ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
 ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-textarea,prop,cols,number | undefined,undefined,false,false
-ion-textarea,prop,debounce,number,0,false,false
+ion-textarea,prop,debounce,number | undefined,undefined,false,false
 ion-textarea,prop,disabled,boolean,false,false,false
 ion-textarea,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-textarea,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false

core/src/components.d.ts

@@ -1086,7 +1086,7 @@ export namespace Components {
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
-        "debounce": number;
+        "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -2754,7 +2754,7 @@ export namespace Components {
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
-        "debounce": number;
+        "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the textarea.
          */

core/src/components/input/input.tsx

@@ -30,6 +30,8 @@ export class Input implements ComponentInterface {
   private inputId = `ion-input-${inputIds++}`;
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
+  private originalIonInput?: EventEmitter<InputInputEventDetail>;
+
   /**
    * `true` if the input was cleared as a result of the user typing
    * with `clearOnEdit` enabled.
@@ -93,11 +95,17 @@ export class Input implements ComponentInterface {
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
    */
-  @Prop() debounce = 0;
+  @Prop() debounce?: number;
 
   @Watch('debounce')
   protected debounceChanged() {
-    this.ionInput = debounceEvent(this.ionInput, this.debounce);
+    const { ionInput, debounce, originalIonInput } = this;
+
+    /**
+     * If debounce is undefined, we have to manually revert the ionInput emitter in case
+     * debounce used to be set to a number. Otherwise, the event would stay debounced.
+     */
+    this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
   }
 
   /**
@@ -293,6 +301,7 @@ export class Input implements ComponentInterface {
   }
 
   componentDidLoad() {
+    this.originalIonInput = this.ionInput;
     const nativeInput = this.nativeInput;
     if (nativeInput) {
       // TODO: FW-729 Update to JSX bindings when Stencil resolves bug with:

core/src/components/input/test/clearOnEdit/input.e2e.ts

@@ -67,7 +67,7 @@ test.describe('input: clearOnEdit', () => {
 
     await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
 
-    expect(ionInputSpy).toHaveReceivedEventTimes(4);
+    expect(ionInputSpy).toHaveReceivedEventTimes(5);
     expect(ionChangeSpy).toHaveReceivedEventTimes(2);
   });
 });

core/src/components/searchbar/searchbar.tsx

@@ -24,7 +24,7 @@ export class Searchbar implements ComponentInterface {
   private nativeInput?: HTMLInputElement;
   private isCancelVisible = false;
   private shouldAlignLeft = true;
-  private originalIonInput!: EventEmitter<KeyboardEvent | null>;
+  private originalIonInput?: EventEmitter<KeyboardEvent | null>;
 
   /**
    * The value of the input when the textarea is focused.
@@ -87,7 +87,7 @@ export class Searchbar implements ComponentInterface {
      * If debounce is undefined, we have to manually revert the ionInput emitter in case
      * debounce used to be set to a number. Otherwise, the event would stay debounced.
      */
-    this.ionInput = debounce === undefined ? originalIonInput : debounceEvent(ionInput, debounce);
+    this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
   }
 
   /**

core/src/components/textarea/textarea.tsx

@@ -30,6 +30,8 @@ export class Textarea implements ComponentInterface {
   private didTextareaClearOnEdit = false;
   private textareaWrapper?: HTMLElement;
   private inheritedAttributes: Attributes = {};
+  private originalIonInput?: EventEmitter<TextareaInputEventDetail>;
+
   /**
    * The value of the textarea when the textarea is focused.
    */
@@ -65,11 +67,17 @@ export class Textarea implements ComponentInterface {
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
    */
-  @Prop() debounce = 0;
+  @Prop() debounce?: number;
 
   @Watch('debounce')
   protected debounceChanged() {
-    this.ionInput = debounceEvent(this.ionInput, this.debounce);
+    const { ionInput, debounce, originalIonInput } = this;
+
+    /**
+     * If debounce is undefined, we have to manually revert the ionInput emitter in case
+     * debounce used to be set to a number. Otherwise, the event would stay debounced.
+     */
+    this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
   }
 
   /**
@@ -236,6 +244,7 @@ export class Textarea implements ComponentInterface {
   }
 
   componentDidLoad() {
+    this.originalIonInput = this.ionInput;
     this.runAutoGrow();
   }