fix(segment): scrollable segments center button on click (#26285)

resolves #25367
ionic-team · Nov 16, 2022 · 73ea64c · 73ea64c
1 parent 4aabbdf
commit 73ea64c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
@@ -88,6 +88,22 @@ export class Segment implements ComponentInterface {
         this.valueAfterGesture = value;
       }
     }
+
+    if (this.scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+        });
+      }
+    }
   }
 
   /**

diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
@@ -29,6 +29,17 @@
           </ion-segment>
         </ion-toolbar>
 
+        <ion-toolbar>
+          <ion-segment value="2" scrollable="true">
+            <ion-segment-button value="1">Button 1</ion-segment-button>
+            <ion-segment-button value="2">Button 3</ion-segment-button>
+            <ion-segment-button value="3">Button 3</ion-segment-button>
+            <ion-segment-button value="4">Button 4</ion-segment-button>
+            <ion-segment-button value="5">Button 5</ion-segment-button>
+            <ion-segment-button value="6">Button 6</ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
         <ion-toolbar>
           <ion-segment name="dynamicPropDisable" disabled color="danger">
             <ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>