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

fix(segment): only emit ionChange when user releases pointer from screen (#20495)

Browse Source 
fixes #20500
fixes #20257
This commit is contained in:
Liam DeBeasi
2020-02-18 15:11:28 -05:00
committed by GitHub
parent 7a461c59c5
commit 4d50064764
5 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/segment/segment.tsx
View File

@ -23,6 +23,9 @@ export class Segment implements ComponentInterface {
private didInit = false;
private checked?: HTMLIonSegmentButtonElement;
// Value to be emitted when gesture ends
private valueAfterGesture?: any;
@Element() el!: HTMLIonSegmentElement;
@State() activated = false;
@ -52,17 +55,29 @@ export class Segment implements ComponentInterface {
@Prop({ mutable: true }) value?: string | null;
@Watch('value')
protected valueChanged(value: string | undefined) {
if (this.didInit) {
this.ionChange.emit({ value });
protected valueChanged(value: string | undefined, oldValue: string | undefined | null) {
this.ionSelect.emit({ value });
if (oldValue !== '' || this.didInit) {
if (!this.activated) {
this.ionChange.emit({ value });
} else {
this.valueAfterGesture = value;
}
}
}
/**
* Emitted when the value property has changed.
* Emitted when the value property has changed and any
* dragging pointer has been released from `ion-segment`.
*/
@Event() ionChange!: EventEmitter<SegmentChangeEventDetail>;
/**
* Emitted when user has dragged over a new button
* @internal
*/
@Event() ionSelect!: EventEmitter<SegmentChangeEventDetail>;
/**
* Emitted when the styles change.
* @internal
@ -134,6 +149,12 @@ export class Segment implements ComponentInterface {
if (checkedValidButton) {
this.addRipple(detail);
}
const value = this.valueAfterGesture;
if (value !== undefined) {
this.ionChange.emit({ value });
this.valueAfterGesture = undefined;
}
}
private getButtons() {