fix(segment): mode smooth scroll, update content at end of gesture

Author: Tanner Reits

core/src/components/segment/segment.tsx

@@ -27,6 +27,11 @@ export class Segment implements ComponentInterface {
 
   // Value before the segment is dragged
   private valueBeforeGesture?: SegmentValue;
+  /**
+   * Whether the segment "indicator" is currently being dragged.
+   * This is used to prevent updating the segment view content while the gesture is still active.
+   */
+  private gesturing = false;
 
   private segmentViewEl?: HTMLIonSegmentViewElement | null = null;
   private lastNextIndex?: number;
@@ -36,7 +41,7 @@ export class Segment implements ComponentInterface {
    * This behavior is enabled by default, but is set false when scrolling content views
    * since we don't want to "double scroll" the segment view.
    */
-  private triggerScrollOnValueChange?: boolean;
+  private updateContentOnValueChange?: boolean;
 
   @Element() el!: HTMLIonSegmentElement;
 
@@ -104,12 +109,10 @@ export class Segment implements ComponentInterface {
       if (previous && current) {
         if (!this.segmentViewEl) {
           this.checkButton(previous, current);
-        } else if (this.triggerScrollOnValueChange !== false) {
-          this.updateSegmentView();
+        } else if (this.updateContentOnValueChange !== false && !this.gesturing) {
+          this.updateSegmentView(this.modeSmoothScroll);
         }
       }
-    } else if (value !== undefined && oldValue === undefined && this.segmentViewEl) {
-      this.updateSegmentView();
     }
 
     /**
@@ -123,7 +126,7 @@ export class Segment implements ComponentInterface {
       this.scrollActiveButtonIntoView();
     }
 
-    this.triggerScrollOnValueChange = undefined;
+    this.updateContentOnValueChange = undefined;
   }
 
   /**
@@ -227,6 +230,7 @@ export class Segment implements ComponentInterface {
 
   onStart(detail: GestureDetail) {
     this.valueBeforeGesture = this.value;
+    this.gesturing = true;
     this.activate(detail);
   }
 
@@ -245,10 +249,11 @@ export class Segment implements ComponentInterface {
     if (value !== undefined) {
       if (this.valueBeforeGesture !== value) {
         this.emitValueChange();
-        this.updateSegmentView();
+        this.updateSegmentView(this.modeSmoothScroll);
       }
     }
     this.valueBeforeGesture = undefined;
+    this.gesturing = false;
   }
 
   /**
@@ -270,6 +275,13 @@ export class Segment implements ComponentInterface {
     return this.getButtons().find((button) => button.value === this.value);
   }
 
+  /**
+   * The smooth scroll behavior of the segment view is tied to the mode.
+   */
+  private get modeSmoothScroll() {
+    return getIonMode(this) === 'ios' ? false : true;
+  }
+
   /*
    * Activate both the segment and the buttons
    * due to a bug with ::slotted in Safari
@@ -400,7 +412,7 @@ export class Segment implements ComponentInterface {
 
       if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
         this.lastNextIndex = nextIndex;
-        this.triggerScrollOnValueChange = false;
+        this.updateContentOnValueChange = false;
 
         this.checkButton(current, buttons[nextIndex]);
         this.emitValueChange();
@@ -613,7 +625,7 @@ export class Segment implements ComponentInterface {
     }
 
     if (this.segmentViewEl) {
-      this.updateSegmentView();
+      this.updateSegmentView(this.modeSmoothScroll);
 
       if (this.scrollable && previous) {
         this.checkButton(previous, current);