ionic-framework
ionic-framework copied to clipboard
feat: automatically bring to focus ion-segment-button when clicked in scrollable segment
Prerequisites
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] 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:
https://user-images.githubusercontent.com/7296623/170725660-e95feeb5-d07b-4132-b049-626f672c4826.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:
https://user-images.githubusercontent.com/7296623/170725873-b07f245f-8006-49e4-838b-876173b45ff8.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.
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); }
Hi everyone,
Here is a dev build if anyone is interested in testing the proposed fix:
6.3.7-dev.11668459335.15b98d0a
Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/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.
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.