bug: ion-segment and ion-segment-button href not working

Bug Report

Ionic version: [x] 5.x

Current behavior: when using the ion-segments with href navigation doesn’t work. as a workaround, I wrapped ion-segment-button with <a [routerLink] = “…” and used [routerLinkActive]= “…” in ion-segment-button. This worked fine in V 4 but is now broken I need the links for SEO so (ionChaneg) won’t do the trick

Expected behavior: should be able to navigate and determine active segment based on url e.g. https://cubesolver.app/tabs/guide/advanced/pll/f should go to the right page and mark “Advanced”, “PLL”, and “f” segments as active (the link above is to a working V4

Steps to reproduce: see code example below…

Related code:

<ion-segment [(ngModel)]="segment"  >
  <a [routerLink]="'/tabs/guide/using'" >
    <ion-segment-button  value="using" [routerLinkActive]="'segment-button-checked segment-activated'" >
      <div class="container icon-container">
        <div class="sprite-png sprite-png-custom"></div>
      </div>
      <div class="container text-container">Using</div>
    </ion-segment-button>
  </a>

  <a [routerLink]="'/tabs/guide/solving'">
    <ion-segment-button value="solving"   [routerLinkActive]="'segment-button-checked segment-activated'" >
      <div class="container icon-container">
        <div class="sprite-png sprite-png-solve"></div>
      </div>
      <div class="container text-container">Solving</div>
    </ion-segment-button>
  </a>
  <a [routerLink]="'/tabs/guide/advanced'">
    <ion-segment-button value="f2l"   [routerLinkActive]="'segment-button-checked segment-activated'">
      <div class="container icon-container">
        <div class="sprite-png sprite-png-advanced"></div>
      </div>
      <div class="container text-container">Advanced</div>
    </ion-segment-button>
  </a>
</ion-segment>

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[yarivgdidi]

Hi Congrats on the new release 😃 After upgrading to 5.0 and minor changes to my code, things looks better.

By other glitches, I meant unexpected behavior where I could’t put my finger on what I’ve did different.

To sum things up: For the reproduction I’ve made 3 slightly different implementation of segments with Icon in the button tab one - as in documentation tab two - button wrapped with a link (I need this for SEO) tab three - button wrapped with like in tab two but navigation is done from JS on iconChange event

Most issues where when clicking on the inner div (the icon) in mobile simulation mode

Tab three seems to work OK now - main issues were propagation of inner div event causing to bad routing are now solved

Tab two - navigation doesn’t work in mobile simulation (as did in Ionic 4 and do in desktop mode)

Tab one - because it is not wrapped with link, when refreshing the page - state is not preserved

Thanks again for the effort I feel safe to upgrade now

Yariv

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