bug: ion-segment does not automatically slide to the active ion-segment-button

[DiogoParrinha]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

I have an ion-segment with multiple ion-segment-button entries, that go beyond the view.

When the view is loaded, the right button is selected but it may be beyond what's visible, and it doesn't automatically slide into the selected slide: (you can see a tiny green selection on the right side)

If I click the button, it slides to make it centered:

It seems the issue is really just the initialization.

Expected Behavior

The ion-segment-button should be as centered as possible, just like when we click them.

Steps to Reproduce

Create the following ion-segment:

  <ion-segment [scrollable]="true" value="6">
    <ion-segment-button value="1">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="2">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="3">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="4">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="5">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="6">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
    <ion-segment-button value="7">
      <div class="day-container" class="ion-padding-top">
        <div class="day-of-week">Abc</div>
        <div class="day-of-month">13</div>
        <div class="month">Sep</div>
      </div>
    </ion-segment-button>
  </ion-segment>

The button 6 will be outside the view and it won't slide into it.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 7.1.1 (...)
   Ionic Framework               : @ionic/angular 7.3.0
   @angular-devkit/build-angular : 14.2.12
   @angular-devkit/schematics    : 14.2.12
   @angular/cli                  : 14.2.12
   @ionic/angular-toolkit        : not installed

Capacitor:

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

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.3
   native-run  : 1.7.2

System:

   NodeJS : v18.16.1 (...)
   npm    : 9.8.1
   OS     : Windows 10```

### Additional Information

Disregard the other experiments outside the red boxes

[DiogoParrinha]

My workaround:

1. Add id to each segment button
2. Make sure no value is set for the default segment button (e.g. in my case I'd set value to a var that's empty so that it doesn't automatically pick a segment button)
3. Fake click so that it moves to the "right" segment button

var observer = new MutationObserver(function () {
            this.currentDate = new Date();
            const index = this.currentDate.getDay();
            const element = document.getElementById('segment-' + (index));
            if (element !== undefined) {
                observer.disconnect();
                element.click();
            }
        });

observer.observe(document, { childList: true, subtree: true });

[averyrousseau]

Here is a dev build if you're interested in testing the proposed fix:

npm install @ionic/angular@7.4.3-dev.11696355997.1d94070b

[averyrousseau]

This has been resolved via #28276 and the fix will be available in a future release of Ionic. Thank you!