Ionic-framework: bug: Segment button checked attribute not working on initial load

[gr99t]

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:

[biesbjerg]

I'm seeing the same, when navigating to a page containing ion-segment.

This works around the issue for now in Angular:

...
public constructor(protected cdr: ChangeDetectorRef) {}

public ngAfterViewInit(): void {
    // Bug: https://github.com/ionic-team/ionic/issues/19289
    setTimeout(() => this.cdr.markForCheck());
}
...

Maybe this change is responsible?

[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

[brandyscarney]

Thank you for the issue! I was able to reproduce this on a Codepen (without Angular): https://codepen.io/ionic/pen/RwbJOEG?editors=1010

I'm not able to reproduce it in 4.8.0 though. Are you all seeing the same?

cc @manucorporat

[Ivnosing]

I am encountering this issue after upgrading @ionic/angular from 4.7.1 to 4.9.0.

Setting a value for each ion-segment-button as @intodevelopment said solves the problem for me.

[gr99t]

Yes, it was working as expected prior 4.9.0.

Using values as @intodevelopment mentioned seems to work for mee too.

[srepollock]

@gr99t have you tried running on a later version or are you locked into 4.9.0?

[gr99t]

@srepollock still not working for me in 4.11.3 when I omit the value property

[neoemptor]

Yeah, checked doesn't work at all for @ionic/angular 4.7.1, but the following works.
As a quick fix, just initialise your segment variable to the default value in your page.ts.
Make sure all your segment buttons have a value set.

[thameurr]

Fixed by adding value. thanks

[brandyscarney]

Just to update this issue, this is related to this PR: https://github.com/ionic-team/ionic/pull/19449

We're still discussing the pros & cons of this, but it is one of our top priorities.

[liamdebeasi]

Thanks for the issue! This issue has been resolved via https://github.com/ionic-team/ionic/pull/19449 and will be available in an upcoming release of Ionic Framework.

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