fix(segment): programmatically scroll content into view when setting value

Author: Tanner Reits

core/src/components.d.ts

@@ -2730,7 +2730,6 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * This method is used to programmatically set the displayed segment content in the segment view. Calling this method will update the `value` of the corresponding segment button.
           * @param id : The id of the segment content to display.
           * @param smoothScroll : Whether to animate the scroll transition.
          */

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

@@ -106,9 +106,12 @@ export class SegmentView implements ComponentInterface {
   }
 
   /**
+   * @internal
+   *
    * This method is used to programmatically set the displayed segment content
    * in the segment view. Calling this method will update the `value` of the
    * corresponding segment button.
+   *
    * @param id: The id of the segment content to display.
    * @param smoothScroll: Whether to animate the scroll transition.
    */

core/src/components/segment/segment.tsx

@@ -106,6 +106,12 @@ export class Segment implements ComponentInterface {
     // The scroll listener should handle scrolling the active button into view as needed
     if (!this.segmentViewEl) {
       this.scrollActiveButtonIntoView();
+    } else {
+      const activeButton = this.getButtons().find((button) => button.value === value);
+
+      if (activeButton?.contentId) {
+        this.segmentViewEl.setContent(activeButton.contentId);
+      }
     }
   }
 

packages/angular/src/directives/proxies.ts

@@ -2027,8 +2027,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
-  inputs: ['disabled'],
-  methods: ['setContent']
+  inputs: ['disabled']
 })
 @Component({
   selector: 'ion-segment-view',

packages/angular/standalone/src/directives/proxies.ts

@@ -1865,8 +1865,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSegmentView,
-  inputs: ['disabled'],
-  methods: ['setContent']
+  inputs: ['disabled']
 })
 @Component({
   selector: 'ion-segment-view',