Ionic-framework: bug: Router links don't navigate when ion-segment-buttons are clicked on mobile devices

Created on 3 Mar 2020  路  4Comments  路  Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 5.x

Current behavior:
When viewing clicking on a ion-segment-button which has a routerLink attribute, you are not navigated to the router link provided when using the Chrome mobile device preview mode or a physical device.

Oddly enough the page navigates as expected when clicked if you are using a normal browser window (and not the device mode). Also I was able to get the navigation to work by tabbing to the segment I want and hitting enter.

Expected behavior:
Clicking the ion-segment-button takes you to the route defined in the ion-segment-button routerLink

Steps to reproduce:
I have a sample app reproducing the issue.

  1. Go to http://localhost:8100/tabs/tab1
  2. Click on segment 1 (expected to navigate to http://localhost:8100/tabs/tab1/seg1)
  3. Click on segment 2 (expected to navigate to http://localhost:8100/tabs/tab1/seg2)

Related code:
https://github.com/wontondon/ion-segment-routerlink-issue

<ion-segment>
    <ion-segment-button routerLink='/tabs/tab1/seg1'>
      <ion-label>Segement 1</ion-label>
    </ion-segment-button>
    <ion-segment-button routerLink='/tabs/tab1/seg2'>
      <ion-label>Segement 2</ion-label>
    </ion-segment-button>
  </ion-segment>

Other information:
I thought it might be related to #20381 which was fixed by https://github.com/ionic-team/ionic/pull/20522. This also has similar symptoms to #20466. It's possible this is a dupe, but I tried some of the newer dev builds 5.1.0-dev.202002272138.c1d7bf2 and I was still able to reproduce this issue.

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/Users/xxx/.nvm/versions/node/v10.16.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/Users/xxx/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina
core bug

Most helpful comment

@liamdebeasi looks like its working now. Thanks!

All 4 comments

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

@liamdebeasi looks like its working now. Thanks!

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

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.

Was this page helpful?
0 / 5 - 0 ratings