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

core/src/components.d.ts

@@ -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;
     /**

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

@@ -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;
     }
   }

core/src/components/segment/readme.md

@@ -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

core/src/components/segment/segment.tsx

@@ -21,6 +21,10 @@ export class Segment implements ComponentInterface {
   private gesture?: Gesture;
   private didInit = false;
   private checked?: HTMLIonSegmentButtonElement;
+  private pointerDown = false;
+
+  // Value to be emitted when gesture ends
+  private valueAfterGesture?: any;
 
   @Element() el!: HTMLIonSegmentElement;
 
@@ -53,15 +57,27 @@ export class Segment implements ComponentInterface {
   @Watch('value')
   protected valueChanged(value: string | undefined) {
     if (this.didInit) {
-      this.ionChange.emit({ value });
+      this.ionSelect.emit({ value });
+      if (!this.pointerDown) {
+        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
@@ -115,6 +131,7 @@ export class Segment implements ComponentInterface {
   }
 
   onStart(detail: GestureDetail) {
+    this.pointerDown = true;
     this.activate(detail);
   }
 
@@ -123,6 +140,7 @@ export class Segment implements ComponentInterface {
   }
 
   onEnd(detail: GestureDetail) {
+    this.pointerDown = false;
     this.setActivated(false);
 
     const checkedValidButton = this.setNextIndex(detail, true);
@@ -133,6 +151,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() {