Tab Content does not paint

Ionic Framework ionic-v3
1

Hi, my app consists of a set of tabs that user navigates through. The issue I am encountering is that on the actual device, the contents of some of the tabs are not getting painted, but when I click certain locations in the screen, the controls on the tab that should have been drawn are active and show dialogs etc. This only happens on an actual device, ie. ios/android, and it happens on both of them. This is the setup I have for the tabs:

  ...
  <ion-tabs selectedIndex="{{(navigationServiceProvider.currentPageIndex | async)}}" (ionChange)="tabChange($event)" #myTabs>        
    <ion-tab [root]="aRoot" tabTitle="A" show="false" (ionSelect)="changeToA()"></ion-tab> 
    <ion-tab [root]="bRoot" tabTitle="B" show="false" (ionSelect)="changeToB()"></ion-tab>    
    <ion-tab [root]="cRoot" tabTitle="C" show="false" (ionSelect)="changeToC()"></ion-tab>
    <ion-tab [root]="dRoot" tabTitle="D" show="false" ></ion-tab>
...

And

@Injectable()
export class NavigationServiceProvider {
...
_currentPageIndex = new BehaviorSubject<Number>(null);
  public readonly currentPageIndex : Observable<Number> = this._currentPageIndex.asObservable();
...
  gotoPage(pageIndex : number) {        
    this._currentPageIndex.next(pageIndex);
  }
}

Ionic Info:

Ionic:

   ionic (Ionic CLI)  : 4.5.0
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.7
Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2, browser 5.0.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.2.5, (and 17 other plugins)

I am using “rxjs”: “5.5.11”

This issue occurs when I try to navigate from one tab to another via:

this.navigationServiceProvider.gotoPage(NavigationServiceProvider.TAB_A_INDEX);

What I am trying to do is to have the application navigate to the selected tab (which seems to be happening), and have the selected tab paint its UI.
Expected Result: The application navigates to tab TAB_A_INDEX and paints that tab.
Actual Result: The application appears to be staying on the current tab (i.e. the UI is not refreshed) but when I tap the page, the controls that are on tab TAB_A_INDEX respond to the events.

If you have any ideas as to what might be causing this, I would love to hear them! Thank you for your help!

2

what are you trying to achieve ? it would be great if you share screenshot like current behavior and expected behavior you want

3

Hi indraraj26, thanks for the clarification, I added some hopefully relevant details.

4

if i understood you correctly
this is what i do with ion-tabs
selectedIndex =1 that means tab2root page will be rendered

<ion-tabs selectedIndex="1">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

@Component({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root = Page1; //Page1 is need to import this is actual page UI that you want to paint
  tab2Root = Page2;//Page2 is need to import this is actual page UI that you want to paint
  tab3Root = Page3;//Page3 is need to import this is actual page UI that you want to paint

  constructor() {

  }
}
5

You are correct. The intent is to change tabs programmatically through the service using the databinding mechanism as outlined above.

6

Apparently, the resolution is to update cordova-plugin-ionic-webview to a later version than the one I had. At one point, this line: https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/9ca2c2ffb653a63b4a0a633198641975db6686a7/src/www/ios/ios-wkwebview-exec.js#L127

Changed from using a timeout to using Promises (https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/f0ca88fdd48ea9212120bc0b9cd598af1892fdee/src/www/ios/ios-wkwebview-exec.js#L127) and that fixed all of the weird painting issues. Thank you again for the help!