Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4d50064

Browse filesBrowse files
liamdebeasiliamdebeasi
authored
fix(segment): only emit ionChange when user releases pointer from screen (ionic-team#20495)
fixes ionic-team#20500 fixes ionic-team#20257
1 parent 7a461c5 commit 4d50064
Copy full SHA for 4d50064

5 files changed

+38-10Lines changed: 38 additions & 10 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎angular/src/directives/control-value-accessors/value-accessor.ts‎

Copy file name to clipboardExpand all lines: angular/src/directives/control-value-accessors/value-accessor.ts
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ export class ValueAccessor implements ControlValueAccessor {
1212
constructor(protected el: ElementRef) {}
1313

1414
writeValue(value: any) {
15+
/**
16+
* TODO for Ionic 6:
17+
* Change `value == null ? '' : value;`
18+
* to `value`. This was a fix for IE9, but IE9
19+
* is no longer supported; however, this change
20+
* is potentially a breaking change
21+
*/
1522
this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
1623
setIonicClasses(this.el);
1724
}
Collapse file

‎core/src/components.d.ts‎

Copy file name to clipboardExpand all lines: core/src/components.d.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5209,7 +5209,7 @@ declare namespace LocalJSX {
52095209
*/
52105210
'mode'?: "ios" | "md";
52115211
/**
5212-
* Emitted when the value property has changed.
5212+
* Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
52135213
*/
52145214
'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
52155215
/**
Collapse file

‎core/src/components/segment-button/segment-button.tsx‎

Copy file name to clipboardExpand all lines: core/src/components/segment-button/segment-button.tsx
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
4949
const segmentEl = this.segmentEl = this.el.closest('ion-segment');
5050
if (segmentEl) {
5151
this.updateState();
52-
segmentEl.addEventListener('ionChange', this.updateState);
52+
segmentEl.addEventListener('ionSelect', this.updateState);
5353
}
5454
}
5555

5656
disconnectedCallback() {
5757
const segmentEl = this.segmentEl;
5858
if (segmentEl) {
59-
segmentEl.removeEventListener('ionChange', this.updateState);
59+
segmentEl.removeEventListener('ionSelect', this.updateState);
6060
this.segmentEl = null;
6161
}
6262
}
Collapse file

‎core/src/components/segment/readme.md‎

Copy file name to clipboardExpand all lines: core/src/components/segment/readme.md
+3-3Lines changed: 3 additions & 3 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -449,9 +449,9 @@ export const SegmentExample: React.FC = () => (
449449

450450
## Events
451451

452-
| Event | Description | Type |
453-
| ----------- | -------------------------------------------- | --------------------------------------- |
454-
| `ionChange` | Emitted when the value property has changed. | `CustomEvent<SegmentChangeEventDetail>` |
452+
| Event | Description | Type |
453+
| ----------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------- |
454+
| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. | `CustomEvent<SegmentChangeEventDetail>` |
455455

456456

457457
## CSS Custom Properties
Collapse file

‎core/src/components/segment/segment.tsx‎

Copy file name to clipboardExpand all lines: core/src/components/segment/segment.tsx
+25-4Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export class Segment implements ComponentInterface {
2323
private didInit = false;
2424
private checked?: HTMLIonSegmentButtonElement;
2525

26+
// Value to be emitted when gesture ends
27+
private valueAfterGesture?: any;
28+
2629
@Element() el!: HTMLIonSegmentElement;
2730

2831
@State() activated = false;
@@ -52,17 +55,29 @@ export class Segment implements ComponentInterface {
5255
@Prop({ mutable: true }) value?: string | null;
5356

5457
@Watch('value')
55-
protected valueChanged(value: string | undefined) {
56-
if (this.didInit) {
57-
this.ionChange.emit({ value });
58+
protected valueChanged(value: string | undefined, oldValue: string | undefined | null) {
59+
this.ionSelect.emit({ value });
60+
if (oldValue !== '' || this.didInit) {
61+
if (!this.activated) {
62+
this.ionChange.emit({ value });
63+
} else {
64+
this.valueAfterGesture = value;
65+
}
5866
}
5967
}
6068

6169
/**
62-
* Emitted when the value property has changed.
70+
* Emitted when the value property has changed and any
71+
* dragging pointer has been released from `ion-segment`.
6372
*/
6473
@Event() ionChange!: EventEmitter<SegmentChangeEventDetail>;
6574

75+
/**
76+
* Emitted when user has dragged over a new button
77+
* @internal
78+
*/
79+
@Event() ionSelect!: EventEmitter<SegmentChangeEventDetail>;
80+
6681
/**
6782
* Emitted when the styles change.
6883
* @internal
@@ -134,6 +149,12 @@ export class Segment implements ComponentInterface {
134149
if (checkedValidButton) {
135150
this.addRipple(detail);
136151
}
152+
153+
const value = this.valueAfterGesture;
154+
if (value !== undefined) {
155+
this.ionChange.emit({ value });
156+
this.valueAfterGesture = undefined;
157+
}
137158
}
138159

139160
private getButtons() {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.