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

feat(toggle): ionChange will only emit from user committed changes (#26078)

Browse Source 
Co-authored-by: Sean Perkins <sean@ionic.io>
This commit is contained in:
Amanda Johnston
2022-10-10 09:55:58 -05:00
committed by GitHub
parent e2cbeeb8ac
commit 85d3bd99be
6 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/src/components/toggle/toggle.tsx
View File

@ -70,7 +70,8 @@ export class Toggle implements ComponentInterface {
@Prop() enableOnOffLabels: boolean | undefined = undefined;
/**
* Emitted when the value property has changed.
* Emitted when the user switches the toggle on or off. Does not emit
* when programmatically changing the value of the `checked` property.
*/
@Event() ionChange!: EventEmitter<ToggleChangeEventDetail>;
@ -90,14 +91,6 @@ export class Toggle implements ComponentInterface {
*/
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
@Watch('checked')
checkedChanged(isChecked: boolean) {
this.ionChange.emit({
checked: isChecked,
value: this.value,
});
}
@Watch('disabled')
disabledChanged() {
this.emitStyle();
@ -106,6 +99,18 @@ export class Toggle implements ComponentInterface {
}
}
private toggleChecked() {
const { checked, value } = this;
const isNowChecked = !checked;
this.checked = isNowChecked;
this.ionChange.emit({
checked: isNowChecked,
value,
});
}
async connectedCallback() {
this.gesture = (await import('../../utils/gesture')).createGesture({
el: this.el,
@ -146,7 +151,7 @@ export class Toggle implements ComponentInterface {
private onMove(detail: GestureDetail) {
if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {
this.checked = !this.checked;
this.toggleChecked();
hapticSelection();
}
}
@ -172,7 +177,7 @@ export class Toggle implements ComponentInterface {
ev.preventDefault();
if (this.lastDrag + 300 < Date.now()) {
this.checked = !this.checked;
this.toggleChecked();
}
};