feat: automatically bring to focus ion-segment-button when clicked in scrollable segment

[javebratt]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Buttons in a scrollable ion-segment should become fully visible when clicked.

Currently when the user has a scrollable segment and clicks on a button that is not on focus the button doesn't scroll to appear fully on the screen:

segment-no-focus.mov

Ideally, when the user clicks on a button that is not fully on the screen it should be brought to appear fully on the screen, kind of like Crunchyroll does it:

segment-with-focus.mov

Describe the Use Case

I believe it's a good UX implementations for the users to not have to scroll to be able to see the full label of the selected ion-segment-button

Describe Preferred Solution

When the user clicks the button, it automatically scrolls and becomes fully visible.

Describe Alternatives

No response

Related Code

No response

Additional Information

This was reported as a bug back in 2019 #19976, setting it up now as a feature request because I see that the report is with a previous version of Ionic.

[votala]

I came up with this solution instead waiting on a fix. works on ios/android both modes
segmentChanged(e){
//<ion-segment (ionChange)="segmentChanged($event)">
setTimeout(() => {
const s=e.target.getBoundingClientRect();
const sw=(s.right-s.left);
for (const button of e.target.childNodes) {
if (button.className.indexOf('segment-button-checked')>-1) {
const bc=button.offsetLeft+(button.offsetWidth/2);
const diff=bc-(sw/2);
e.target.scrollTo({
left: diff,
behavior: 'smooth'
});
break;
}
}
}, 200);
}

[liamdebeasi]

Hi everyone,

Here is a dev build if anyone is interested in testing the proposed fix:

6.3.7-dev.11668459335.15b98d0a

[liamdebeasi]

Thanks for the issue. This has been resolved via #26285, and a fix will be available in an upcoming release of Ionic Framework. Please feel free to continue testing the fix and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.