Nav.push() behaving abnormally while nav.setRoot() works fine


#1

Since Angular 2 Rc3 and Ionic2 Beta10, the use of the nav.push() function in our app has essentially broken. The function is fired by a button, which must be clicked twice to actually cause the page to be pushed to the top of the page stack. Once the back button is hit, the view of the previous page (that contained the button with the push function) is now broken, and does not update (even though I can still see the interactions happening via console.logs in the browser console).
Oddly enough, if I change the nav.push() function to a nav.setRoot() function, the page will change on the first click of the button, and if I navigate back to the original page, the view is not broken.

Here is the code - the push() happens in the setLocationState() function:

import {NavController, Nav} from 'ionic-angular'
import {Component, ViewChild} from '@angular/core'
import {Mongo} from 'meteor/mongo'
import AppState from '../../../../../client/app-state'
import ShiftState from '../../../../../client/shift-state'
import {Units} from '../../../../../collections/units'
import {ManagerSchedule} from '../schedule/managerSchedule'
import {NavbarComponent} from '../../../layouts/navbar/navbar'
import * as _ from 'lodash'

declare function require(name: string): any;

@Component({
  template: `
    <ion-header>
      <navbar></navbar>
    </ion-header>
    <ion-content padding>
      <ion-toolbar>
        <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
      </ion-toolbar>
      <ion-list no-lines>
        <ion-list-header>Locations:</ion-list-header>
          <ion-item class='centerText' *ngFor='let unit of unitsArray' [ngClass]="{'selected' : store.manager.locationId == unit.zId}" (click)='selectLocation(unit.zId)'>{{ unit.name }}</ion-item>
      </ion-list>
      <div class='punchButton'>
        <ion-toolbar class='bottom'>
          <span class='selectedLocation' *ngIf='store.manager.locationId!==0'>{{ store.manager.locationName }}</span>
          <span class='selectedLocation' *ngIf='store.manager.locationId==0'>No Location Selected</span>
        </ion-toolbar>
        <ion-toolbar >
          <button block large light clear *ngIf='store.manager.locationId == 0' class='noBorder'>Select a Location</button>
          <button block large *ngIf='store.manager.locationId !== 0' (click)='setLocationState()'>View Schedule</button>
        </ion-toolbar>
      </div>
    </ion-content>
    <!-- <ion-infinite-scroll (infinite)="doInfinite($event)">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll> -->
  `,
  styleUrls: [require('./managerLocation.scss')],
  directives: [NavbarComponent, ManagerSchedule]
})

export class ManagerPage{
  store = AppState;
  shiftState = ShiftState;
  units: Mongo.Cursor<Object>;
  selectedLocation = {
      zId: 0
    };
  unitsArray = [];
  isSearch = false;
  q = '';

  onPageWillEnter(){
    this.store.pageTitle = ''
  }


  constructor(private nav: NavController) {
    console.log('this is logging on the manager component')
    this.units = Units.find();
    console.log(this.units)
    this.initializeItems()
  }

  selectLocation = (zId) => {
      this.store.manager.locationId = zId
      console.log("this is the store.manager.locationId")
      console.log(this.store.manager.locationId)
      console.log("this is the zId")
      console.log(zId)
  }

  setLocationState = () => {
      this.selectedLocation.zId = this.store.manager.locationId;
      //**THIS DOES NOT WORK**
      this.nav.push(ManagerSchedule)
      //**THIS WORKS FINE**
      // this.nav.setRoot(ManagerSchedule) 
      console.log('Set location state to: ' + this.selectedLocation.zId)
  }

  initializeItems() {
    this.unitsArray = [];
    var unitsObj = this.units.fetch()
    for (var unit in unitsObj) {
      this.unitsArray.push(unitsObj[unit]);
    }
  }

  getItems(ev) {
    this.initializeItems();

    this.q = ev.target.value;
    console.log(this.q)

    if (this.q == undefined) {
      return;
    }

    if (this.q.trim() == '') {
      return;
    }

    this.unitsArray = this.unitsArray.filter((v) => {
      if (v.name.toLowerCase().indexOf(this.q.toLowerCase()) > -1) {
        console.log("in the search filter")
        return true;
      }
      return false;
    })
    console.log(this.unitsArray)
  }

}