Bug? Ionic Tab opens modal and breaks ion-segment

Ionic Framework ionic-v3
1

Dear all

I have bumped onto the following problem with Tabs and ion-segments. Either I’m missing something or there is a bug. Has someone else seen it? Any remediation suggestions highly appreciated.

Issue description/replication:

  • Configure a ‘tab’ to open a modal.
  • Navigate to a tab page with ion-segments.
  • then open the modal with the ‘tab’ that opens it.
  • when you close the modal, the ion-segments do not refresh their contents.

Issue replication code can be found at:

A quick description of my code:

  1. My tabs HTML template:
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab (select)="openModal()" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
</ion-tabs>
  1. tabs.ts opens the model

openModal(){
let modal=Modal.create(ModalPage);
this._nav.present(modal);
}

  1. The tab 1 page which has the ion-segment
  <ion-segment [(ngModel)]="hometabs">
    <ion-segment-button value="seg1">Seg 1</ion-segment-button>
    <ion-segment-button value="seg2">Seg 2</ion-segment-button>
  </ion-segment>
  
  <div>
    <div [ngSwitch]="hometabs">
      
      <div *ngSwitchWhen="'seg1'">Seg 1</div>
      <div *ngSwitchWhen="'seg2'">Seg 2</div>
      
    </div>
  </div>
  1. The modal
@Page({
    template:`
        <ion-content padding>
            <button (click)="close()">Close</button>
        </ion-content>
    `
})

export class ModalPage {
    
    constructor( private _nav:NavController,
        private _view:ViewController
    ){
        
    }
    
    close(){
        this._view.dismiss();
        //this._nav.popToRoot();
    }
    
}
1 Like
2

Hmm, I’m not able to replicate this issue at all.
Looks like it’s working perfectly fine on my end.

EDIT:

Ahh the content does not update

3

Could you open an issue for this on github and provide the link to the repo. Looks like a bug to me

4

Hey! I have the same issue :confused:
I have a tab view with a ion-segment and a button opening a modal. When I dismiss my modal, my segment doesn’t work like if the ngSwitch was blocked.

Any idea ?

1 Like
5

Hi
I have already opened a ‘bug’ report, and it has been assigned to an Ionic team member. So I guess they are going to fix it.

For the moment, what you can do, is click on a tab menu again, and then it will start working again.

6

Hello,
@killerchip I have the very same problem, but with Ionic 3.1.1. Did you find a solution (different from not using a modal window :sweat_smile:)? Thanks in advance, Xavi.

7

Hello Xavi.

It was fixed by the team. I’m not aware of the same issue again. I suggest that you open a ticket for the Ionic team to investigate.

Regards
Costas

8

The solution for this error was released in (2017-01-11) by Ionic Team closing the follow issues: #9392 #9811. Very similar of what you described.

All topics about it was closed after this release but seems the error is occurring again in the version 3.1.1. I am using 3.1.1 and facing exaclty the same problem with ion-tabs breaking the behavior of ion-segment.

Did you find any solution?

9

Hello Leopsanta

I had not had any problem with this particular since then…

I’m using Ionic 3.1.1.

Regards

10

I have same problem with ionic 3.3.0 grrr