bug: Segment button checked attribute not working on initial load

Bug Report

Ionic version: [x] 4.9.0

Current behavior: Segment button is not checked initially when attribute “checked” is set

Expected behavior: Segment button is checked initially

Related code:

<ion-segment>
<ion-segment-button checked>
<ion-label>Test 1</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>Test 2</ion-label>
</ion-segment-button>
</ion-segment>

Stackblitz

Other information: Now and then it is checked on page reload (at least on Stackblitz using Chrome, never worked on local installation). I added two additional segments and reloaded the page lots of times and I got all possible combinations of checked buttons or none at all.

Just some examples: 1: 2:
3:

[intodevelopment]

I found that omitting the value attribute from the ion-segment-button appears to be causing this issue. If you, for instance, replace your code with this, it works as expected and the first SegmentButton is selected upon page load.

<ion-segment>
  <ion-segment-button value="test" checked>
    <ion-label>Test 1</ion-label>
  </ion-segment-button>
  <ion-segment-button value="test2">
    <ion-label>Test 2</ion-label>
  </ion-segment-button>
</ion-segment>

This is because the Segment uses the value to determine which of the SegmentButtons should be selected. See for instance: https://github.com/ionic-team/ionic/blob/aec293672565591299606f1534603c976024e59c/core/src/components/segment/segment.tsx#L75

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