From 73ea64c02fff1d63651f6c98f03b43265ba5227a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 16 Nov 2022 13:58:03 -0500
Subject: [PATCH] fix(segment): scrollable segments center button on click
 (#26285)

resolves #25367
---
 core/src/components/segment/segment.tsx          | 16 ++++++++++++++++
 .../src/components/segment/test/basic/index.html | 11 +++++++++++
 2 files changed, 27 insertions(+)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 78bb13ac4f..08cdc3e3f2 100644
--- 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
index 03ffb568ac..be76eafb28 100644
--- 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>