ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

bug: `ion-tabs` does not support index route #27439

Closed AmitMY closed 1 year ago

AmitMY commented 1 year ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

It is currently not possible to set the main tab to be at the route page

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="">
      <ion-icon aria-hidden="true" name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

if used like this, "Home" is not highlighted when one is at the / page, and the tab does not navigate the user home

Expected Behavior

The tab should be highlighted, and clicking it should navigate to the index

Steps to Reproduce

Add multiple tabs, and an ion-tab-button with tab=""

Code Reproduction URL

https://stackblitz.com/edit/angular-68pwvy?file=src/app/example.component.html

  1. "Listen Now" is not highlighted
  2. Click "Radio" then "Listen Now" again. Navigation does not work

    Ionic Info

Ionic:

Ionic CLI : 7.1.1

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

NodeJS : v18.15.0 npm : 9.5.0 OS : macOS Unknown

Additional Information

No response

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

AmitMY commented 1 year ago

Reproduction: https://stackblitz.com/edit/angular-68pwvy?file=src/app/example.component.html

  1. "Listen Now" is not highlighted
  2. Click "Radio" then "Listen Now" again. Navigation does not work
liamdebeasi commented 1 year ago

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/16949.

ionitron-bot[bot] commented 1 year ago

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.