Two tabs selected after router.navigate()

Ionic Framework Ionic Angular
1

Hello,

I have a problem with navigating user in my App, when he clicks “Back” on his device. I want to let him exit the app from the first tab and it works. From other tabs, I want to redirect him to the first tab.

It works, but two tabs on the tab-bar are selected/active. I was trying maaany things all day and nothing worked.

I found exactly the same issue on StackOverflow and commented on it there to don’t double the topic.

If You would like to respond there or here -> I would really appreciate!

Cheers!

1 Like
2

This sounds like a Issue, you can submit here.

You can try to subscribe to the BackButton on the Component that includes the tabs and use select() instead of navigating via URL.

3

Thanks for a response.

It was also my plan, but I was lost in older answers and topic about selecting tabs, with probably no longer supported method and…

Silly question, but - how to use select() for the tab- any link, advise what will work in Ionic 5? I am so looking for working solution.

<ion-tabs #myTabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="news" #news>
      <ion-icon name="megaphone-outline"></ion-icon>
      <ion-label>News</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="games">
      <ion-icon name="trophy-outline"></ion-icon>
      <ion-label>Games</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="schedule">
      <ion-icon name="calendar-outline"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="venues">
      <ion-icon name="location-outline"></ion-icon>
      <ion-label>Places</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

What I need to use before Select in tabs.page.ts ?

4

Wenn you use

@ViewChild('myTabs')
tabs: IonTabs;

i think you should have the Functions on this Object

5

I’ve tried this solution in tabs.page.ts:

@ViewChild('myTabs', {static: true}) tabRef;

ionViewDidEnter(){
    this.subscription = this.platform.backButton.subscribe(()=>{
      this.goBack();
}

goBack() {
    this.tabRef.select('news');
  }

It still works in wrong way - both are selcted.

However, when I added additional button in my tabs.page.html:

<ion-button (click)="goBack()">BACK</ion-button>

It works really well - the same function, also when I was trying router.navigate.

So it’s the issue with backButton - I would need to deal with it - any ideal, suggestions :slight_smile: ?

6

While you wait for better answers, I would like to make a plea on behalf of UI consistency.

Tabs are popular with mobile designers for the same reason virtual workspaces are with window managers: they allow multiplexing of scarce screen real estate. I use i3, which probably leverages virtual workspaces more heavily than most other window managers out there. It would weird me out to no end if suddenly there was only one workspace that I could manually close, and even more so if attempting to close other workspaces instead diverted me to workspace #1.

That’s what I’m hearing when I read this:

That is not how tabs should behave. “Who are you to tell me how tabs should behave? It’s my app and I’ll decide how tabs behave”, you may be tempted to say.

I have lost track of the number of threads I have seen here from people who try to abuse tabs and then complain that they run into technical problems doing so.

Tabs should be like rooms in a house. I’m only in one room at a time, so the lights don’t have to be on in the rooms I’m not in, but it is not the rooms’ job to try to dictate which one of them I should be in, and when I leave a room and go back to it later (which I must be able to do freely), everything should be just as I left it.

As a bonus, when you do use tabs this way and only this way, you run into far fewer technical troubles with them.

7

I have the same problem.

But I’ve already been able to figure out two things

  • With the old android hardware back button everything works
  • With the new android hardware back button it only works in debug mode

Do you have a solution?

Greetings

8

I don’t know how similar your code is to OP’s, but everything I said earlier in this thread I still believe, so please don’t abuse tabs to do surprising routing things.

That being said, every single “this thing I’m doing with selective back button handlers works great until I build the app for production” thread I can remember seeing here was caused by relying on class names as strings.

9

Same problem for me.

I use for example 3 tabs

  • I’m on tab 1
  • i receive a notification on my phone and i click on it, this call in the app the navigation to redirect to tab 3
  • tab 1 and tab 3 are highlight like they are selected (bug!)
  • i click anywhere on the page, nothing occure but highlight on tab 1 disappear (back to normal ! ) and tab 3 still highlight (hopefully!)

i suppose the real tab selected is the tab 3 when navigation is call.
Only one tab can be selected right? the tabs.getSelected() method show the tab 3.

So the display is wrong, a refresh of the display of the tab bar is missing.

10

Have you found a solution? I have the same issue and use case as yours. Any clue, please?