javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(input): debounce controls the timing to delay the ionInput event (#25969)

Browse Source
This commit is contained in:
Sean Perkins
2022-09-20 13:10:50 -04:00
committed by GitHub
parent b4e18494b1
commit 35041b2f3c
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
BREAKING.md
View File

@ -63,9 +63,11 @@ This section details the desktop browser, JavaScript framework, and mobile platf
<h4 id="version-7x-input">Input</h4> <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> <h4 id="version-7x-overlays">Overlays</h4>

4
core/src/components.d.ts vendored
View File

@ -1068,7 +1068,7 @@ export namespace Components {
*/ */
"color"?: Color; "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; "debounce": number;
/** /**
@ -4857,7 +4857,7 @@ declare namespace LocalJSX {
*/ */
"color"?: Color; "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; "debounce"?: number;
/** /**

4
core/src/components/input/input.tsx
View File

@ -92,13 +92,13 @@ export class Input implements ComponentInterface {
@Prop() clearOnEdit?: boolean; @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; @Prop() debounce = 0;
@Watch('debounce') @Watch('debounce')
protected debounceChanged() { protected debounceChanged() {
this.ionChange = debounceEvent(this.ionChange, this.debounce); this.ionInput = debounceEvent(this.ionInput, this.debounce);
} }
/** /**