fix(segment): set the view to the initial value without scrolling

Author: brandyscarney

core/api.txt

@@ -1610,7 +1610,8 @@ ion-segment-button,part,native
 ion-segment-content,shadow
 
 ion-segment-view,shadow
-ion-segment-view,method,setContent,setContent(id: string) => Promise<void>
+ion-segment-view,prop,disabled,boolean,false,false,false
+ion-segment-view,method,setContent,setContent(id: string, smoothScroll?: boolean) => Promise<void>
 
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false

core/src/components.d.ts

@@ -2723,7 +2723,7 @@ export namespace Components {
           * If `true`, the segment view cannot be interacted with.
          */
         "disabled": boolean;
-        "setContent": (id: string) => Promise<void>;
+        "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
     }
     interface IonSelect {
         /**

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

@@ -37,7 +37,7 @@ export class SegmentView implements ComponentInterface {
   }
 
   @Method()
-  async setContent(id: string) {
+  async setContent(id: string, smoothScroll = true) {
     const contents = this.getSegmentContents();
     const index = contents.findIndex((content) => content.id === id);
 
@@ -47,7 +47,7 @@ export class SegmentView implements ComponentInterface {
     this.el.scrollTo({
       top: 0,
       left: index * contentWidth,
-      behavior: 'smooth',
+      behavior: smoothScroll ? 'smooth' : 'auto',
     });
   }
 

core/src/components/segment-view/test/basic/index.html

@@ -15,16 +15,26 @@
 
     <style>
       ion-segment-view {
-        height: 200px;
+        height: 100px;
       }
 
-      ion-segment-content:nth-of-type(even) {
-        background: lightblue;
+      ion-segment-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      ion-segment-content:nth-of-type(odd) {
+      ion-segment-content:nth-of-type(1) {
         background: lightpink;
       }
+
+      ion-segment-content:nth-of-type(2) {
+        background: lightblue;
+      }
+
+      ion-segment-content:nth-of-type(3) {
+        background: lightgreen;
+      }
     </style>
   </head>
 
@@ -38,14 +48,42 @@
 
       <ion-content>
         <ion-toolbar>
-          <ion-segment value="Paid">
-            <ion-segment-button content-id="paid" value="Paid">
+          <ion-segment>
+            <ion-segment-button content-id="no" value="no">
+              <ion-label>No</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="value" value="value">
+              <ion-label>Value</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-segment-view>
+          <ion-segment-content id="no">No</ion-segment-content>
+          <ion-segment-content id="value">Value</ion-segment-content>
+        </ion-segment-view>
+
+          <ion-segment value="all">
+            <ion-segment-button content-id="all" value="all">
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="favorites" value="favorites">
+              <ion-label>Favorites</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-segment-view>
+          <ion-segment-content id="all">All</ion-segment-content>
+          <ion-segment-content id="favorites">Favorites</ion-segment-content>
+        </ion-segment-view>
+
+          <ion-segment value="free">
+            <ion-segment-button content-id="paid" value="paid">
               <ion-label>Paid</ion-label>
             </ion-segment-button>
-            <ion-segment-button content-id="free" value="Free">
+            <ion-segment-button content-id="free" value="free">
               <ion-label>Free</ion-label>
             </ion-segment-button>
-            <ion-segment-button content-id="top" value="Top">
+            <ion-segment-button content-id="top" value="top">
               <ion-label>Top</ion-label>
             </ion-segment-button>
           </ion-segment>
@@ -57,14 +95,14 @@
         </ion-segment-view>
 
         <ion-toolbar>
-          <ion-segment disabled color="danger">
-            <ion-segment-button content-id="bookmarks" value="Bookmarks">
+          <ion-segment disabled value="reading-list">
+            <ion-segment-button content-id="bookmarks" value="bookmarks">
               <ion-label>Bookmarks</ion-label>
             </ion-segment-button>
-            <ion-segment-button content-id="reading-list" value="Reading List">
+            <ion-segment-button content-id="reading-list" value="reading-list">
               <ion-label>Reading List</ion-label>
             </ion-segment-button>
-            <ion-segment-button content-id="shared-links" value="Shared Links">
+            <ion-segment-button content-id="shared-links" value="shared-links">
               <ion-label>Shared Links</ion-label>
             </ion-segment-button>
           </ion-segment>

core/src/components/segment/segment.tsx

@@ -180,6 +180,10 @@ export class Segment implements ComponentInterface {
     if (this.disabled) {
       this.disabledChanged();
     }
+
+    // Update segment view based on the initial value,
+    // but do not animate the scroll
+    this.updateSegmentView(false);
   }
 
   onStart(detail: GestureDetail) {
@@ -322,11 +326,11 @@ export class Segment implements ComponentInterface {
   /**
    * Finds the related segment view and sets its current content
    * based on the selected segment button. This method
-   * should be called only after the gesture is completed
-   * (if dragging between segments) or when a segment button
-   * is clicked directly.
+   * should be called on initial load of the segment,
+   * after the gesture is completed (if dragging between segments)
+   * and when a segment button is clicked directly.
    */
-  private updateSegmentView() {
+  private updateSegmentView(smoothScroll = true) {
     const buttons = this.getButtons();
     const button = buttons.find((btn) => btn.value === this.value);
 
@@ -340,7 +344,7 @@ export class Segment implements ComponentInterface {
     const segmentView = content?.closest('ion-segment-view');
 
     if (segmentView) {
-      segmentView.setContent(button.contentId);
+      segmentView.setContent(button.contentId, smoothScroll);
     }
   }