bug: safari with async values rendered: DOES NOT automatically bring to focus ion-segment-button when clicked in scrollable segment

[folsze]

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 report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Related to: https://github.com/ionic-team/ionic-framework/issues/25367

Expected Behavior

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

Steps to Reproduce

It's enough to run tab 1 here on safari browser ios, with a smaller window width such that the segment becomes scrollable. But this is only really a problem on mobile screen width dimensions. https://github.com/folsze/ion-segment-autoscroll-bug

the problem is the combination of

Code Reproduction URL

https://github.com/folsze/ion-segment-autoscroll-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.6.6 @angular-devkit/build-angular : 17.1.1 @angular-devkit/schematics : 17.1.1 @angular/cli : 17.1.1 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : 5.6.0

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v18.17.1 (/usr/local/bin/node) npm : 9.6.7 OS : macOS Unknown

Additional Information

Here is a demo where I am showing first that it does no t autoscroll on safari but it does autoscroll on chrome later:

[folsze]

this only happens with other content rendering changing before the segment button animation finishes. And only on Safari (ios)

[folsze]

if anyone is looking for a temporary workaround until this is fixed: make your values arrive with a delay of 200ms, such that they get rendered after the animation finishes. This was enough for me, for the animation to finish. Ofc this negatively impacts the UX (less than the bug) so you could only do this on IOS.

[liamdebeasi]

Hey there,

Are you able to reproduce this issue without the use of the observable? I can reproduce the reported behavior, but I'm not able to see anything inside of Ionic that would be responsible for this behavior.

[folsze]

Hi,

Thank you for looking into this.

I was trying around a bit. I just pushed a new commit to my shared repo that makes this bug even more minimal. I am not using observables/async values anymore for the displayed values array. And I am not delaying the emissions anymore. And it still happens.

Or were you referring to the valueChanges observable as to what is causing this bug? How else could I use an ion segment if not with a FormControl and valueChanges, in such a scenario? I will see what I can do, but this is a good hint, that most likely the issue is with a conflict with valueChanges. If I do not get back here, then maybe you could elaborate how one can use ion segment without valueChanges subscription?

EDIT: I now push another commit that does not use the valueChanges observable. The bug still occurs, both with:

1. (ionChange)
2. .ionChange (see my latest commit)

[liamdebeasi]

Thanks! So it looks like the ng-container is what's triggering the problem. There may be some re-rendering going on that reproduces a WebKit bug. Does the issue go away if you wrap your ng-container in a div?

The problem seems to happen if the conditionally rendered element is either immediately before or immediately after the segment.

[folsze]

Yes this fixes it for me! 🥳

[liamdebeasi]

Great! I'm going to close this for now, but let me know if you have any other questions.

[ionitron-bot[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.