fix(all): debounce is not nested

packages/core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
 import { Component, CssClassMap, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { debounce } from '../../utils/helpers';
+import { debounceEvent } from '../../utils/helpers';
 
 
 @Component({
@@ -81,7 +81,7 @@ export class Checkbox implements CheckboxInput {
   }
 
   componentDidLoad() {
-    this.ionStyle.emit = debounce(this.ionStyle.emit.bind(this.ionStyle));
+    this.ionStyle = debounceEvent(this.ionStyle, 0);
     this.didLoad = true;
 
     const parentItem = this.nativeInput.closest('ion-item');

packages/core/src/components/input/input.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
-import { debounce } from '../../utils/helpers';
+import { debounceEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 import { InputComponent } from './input-base';
 
@@ -95,11 +95,8 @@ export class Input implements InputComponent {
   @Prop() debounce = 0;
 
   @Watch('debounce')
-  private debounceInput() {
-    this.ionInput.emit = debounce(
-      this.ionInput.emit.bind(this.ionInput),
-      this.debounce
-    );
+  protected debounceChanged() {
+    this.ionInput = debounceEvent(this.ionInput, this.debounce);
   }
 
   /**
@@ -210,7 +207,7 @@ export class Input implements InputComponent {
   }
 
   componentDidLoad() {
-    this.debounceInput();
+    this.debounceChanged();
     this.emitStyle();
 
     // By default, password inputs clear after focus when they have content

packages/core/src/components/range/range.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { BaseInputComponent, GestureDetail } from '../../index';
-import { clamp, debounce } from '../../utils/helpers';
+import { clamp, debounceEvent } from '../../utils/helpers';
 
 export interface Tick {
   ratio: number | (() => number);
@@ -83,11 +83,8 @@ export class Range implements BaseInputComponent {
   @Prop() debounce = 0;
 
   @Watch('debounce')
-  private debounceChange() {
-    this.ionChange.emit = debounce(
-      this.ionChange.emit.bind(this.ionChange),
-      this.debounce
-    );
+  protected debounceChanged() {
+    this.ionChange = debounceEvent(this.ionChange, this.debounce);
   }
 
   /*
@@ -148,7 +145,7 @@ export class Range implements BaseInputComponent {
   componentWillLoad() {
     this.inputUpdated();
     this.createTicks();
-    this.debounceChange();
+    this.debounceChanged();
     this.emitStyle();
   }
 

packages/core/src/components/searchbar/searchbar.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
-import { debounce } from '../../utils/helpers';
+import { debounceEvent } from '../../utils/helpers';
 
 
 @Component({
@@ -65,11 +65,8 @@ export class Searchbar {
   @Prop() debounce = 250;
 
   @Watch('debounce')
-  private debounceInput() {
-    this.ionInput.emit = debounce(
-      this.ionInput.emit.bind(this.ionInput),
-      this.debounce
-    );
+  protected debounceChanged() {
+    this.ionInput = debounceEvent(this.ionInput, this.debounce);
   }
 
   /**
@@ -124,7 +121,7 @@ export class Searchbar {
 
   componentDidLoad() {
     this.positionElements();
-    this.debounceInput();
+    this.debounceChanged();
   }
 
   /**

packages/core/src/components/textarea/textarea.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
-import { debounce } from '../../utils/helpers';
+import { debounceEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 import { TextareaComponent } from '../input/input-base';
 
@@ -75,11 +75,8 @@ export class Textarea implements TextareaComponent {
   @Prop() debounce = 0;
 
   @Watch('debounce')
-  private debounceInput() {
-    this.ionInput.emit = debounce(
-      this.ionInput.emit.bind(this.ionInput),
-      this.debounce
-    );
+  protected debounceChanged() {
+    this.ionInput = debounceEvent(this.ionInput, this.debounce);
   }
 
   /**
@@ -159,7 +156,7 @@ export class Textarea implements TextareaComponent {
   }
 
   componentDidLoad() {
-    this.debounceInput();
+    this.debounceChanged();
     this.emitStyle();
   }
 

packages/core/src/components/toggle/toggle.tsx

@@ -2,7 +2,7 @@ import { BlurEvent, CheckboxInput, CheckedInputChangeEvent, FocusEvent, StyleEve
 import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 import { GestureDetail } from '../../index';
 import { hapticSelection } from '../../utils/haptic';
-import { debounce } from '../../utils/helpers';
+import { debounceEvent } from '../../utils/helpers';
 
 
 @Component({
@@ -98,7 +98,7 @@ export class Toggle implements CheckboxInput {
   }
 
   componentWillLoad() {
-    this.ionStyle.emit = debounce(this.ionStyle.emit.bind(this.ionStyle));
+    this.ionStyle = debounceEvent(this.ionStyle, 0);
     this.inputId = `ion-tg-${toggleIds++}`;
     if (this.name === undefined) {
       this.name = this.inputId;

packages/core/src/utils/helpers.ts

@@ -1,4 +1,5 @@
 import { Animation } from '../index';
+import { EventEmitter } from '@stencil/core';
 
 export function clamp(min: number, n: number, max: number) {
   return Math.max(min, Math.min(n, max));
@@ -285,6 +286,14 @@ export function domControllerAsync(domControllerFunction: Function, callback?: F
   });
 }
 
+export function debounceEvent(event: EventEmitter, wait: number): EventEmitter {
+  const original = (event as any)._original || event;
+  return {
+    _original: event,
+    emit: debounce(original.emit.bind(original), wait)
+  } as EventEmitter;
+}
+
 export function debounce(func: Function, wait = 0) {
   let timer: number;
   return (...args: any[]): void => {