javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +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

7
angular/src/directives/control-value-accessors/value-accessor.ts
View File

@ -12,6 +12,13 @@ export class ValueAccessor implements ControlValueAccessor {
constructor(protected el: ElementRef) {}
writeValue(value: any) {
/**
* TODO for Ionic 6:
* Change `value == null ? '' : value;`
* to `value`. This was a fix for IE9, but IE9
* is no longer supported; however, this change
* is potentially a breaking change
*/
this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
setIonicClasses(this.el);
}

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

@ -5209,7 +5209,7 @@ declare namespace LocalJSX {
*/
'mode'?: "ios" | "md";
/**
* Emitted when the value property has changed.
* Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
*/
'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
/**

4
core/src/components/segment-button/segment-button.tsx
View File

@ -49,14 +49,14 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
const segmentEl = this.segmentEl = this.el.closest('ion-segment');
if (segmentEl) {
this.updateState();
segmentEl.addEventListener('ionChange', this.updateState);
segmentEl.addEventListener('ionSelect', this.updateState);
}
}
disconnectedCallback() {
const segmentEl = this.segmentEl;
if (segmentEl) {
segmentEl.removeEventListener('ionChange', this.updateState);
segmentEl.removeEventListener('ionSelect', this.updateState);
this.segmentEl = null;
}
}

6
core/src/components/segment/readme.md
View File

@ -449,9 +449,9 @@ export const SegmentExample: React.FC = () => (
## Events
| Event | Description | Type |
| ----------- | -------------------------------------------- | --------------------------------------- |
| `ionChange` | Emitted when the value property has changed. | `CustomEvent<SegmentChangeEventDetail>` |
| Event | Description | Type |
| ----------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. | `CustomEvent<SegmentChangeEventDetail>` |
## CSS Custom Properties

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() {