Bug: Tapping a tab selector more than once redirects me to an entirely different view/route!

atuttle commented 10 years ago

Brief screen recording: https://www.dropbox.com/s/ywp4wgsebqeg0gf/ionic_tabs_bug.mov

As you see in the video, I start at an authentication page. After logging in, I select an event, and after selecting an event I'm shown a list of attendees that I can check into the event. I have tabs at the bottom to switch between the who's-not-yet-here and who's-already-here views of the data. Tapping the "undo" (already-here tab selector) twice in a row takes me back to the auth view/route.

Interestingly, when first taken to the check-in view, the not-yet-here tab is active by default, and simply tapping its tab ("check in") once takes me back to the event selection view/route.

Of course, the expected behavior would be to do nothing if the selected tab is already active.

I've downloaded the latest nightly builds and this is still present in them (4pm eastern, feb 14th).

ajoslin commented 10 years ago

Hi @attutle,

I think your problem is your login page is in the same history stack as your content page. Could you post a bit of your markup for this?

atuttle commented 10 years ago

routes:

app.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('auth', {
        url: "/auth"
        ,templateUrl: "templates/auth.html"
        ,controller: "AuthCtrl"
    })
    .state('chooseEvent', {
        url: "/event/choose"
        ,templateUrl: "templates/chooseEvent.html"
        ,controller: "EventsCtrl"
    })
    .state('eventCheckin', {
        url: "/event/checkin"
        ,templateUrl: "templates/eventCheckin.html"
        ,controller: "CheckinCtrl"
    })
    ;

     // if none of the above are matched, go to this one
     $urlRouterProvider.otherwise("/auth");
});

index.html:

<body ng-app="checkinApp" ng-controller="GlobalCtrl">
    <pane>
        <toaster-container toaster-options="{'position-class': 'toast-center-full-width','fade-out': 1, 'fade-in': 0}"></toaster-container>
        <nav-view animation="slide-left-right"></nav-view>
    </pane>
</body>

auth.html:

<header class="bar bar-header bar-dark"><h1 class="title">UD Remote Checkin</h1></header>
<content has-header="true" class="padding-horizontal padding-top">

    <div class="list">
        <label class="item item-input"><!--  item-stacked-label -->
        <span class="input-label">Email</span>
            <input type="email" placeholder="email" ng-model="email">
        </label>
        <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" placeholder="password" ng-model="password">
        </label>
    </div>

    <button class="button button-positive button-block" ng-click="auth(email,password)"><i class="icon ion-log-in"></i> Login</button>
    <p style="text-align:center">App version: @@VERSION</p>

</content>

chooseEvent.html:

<header class="bar bar-header bar-dark">
    <button class="button button-icon icon ion-log-out" ng-click="logout()"></button>
    <h1 class="title">UD Remote Checkin</h1>
</header>
<content has-header="true" on-refresh="refreshEvents()">

    <refresher></refresher>

    <list class="list-with-icons">
        <item ng-repeat="e in currentEvents" ng-click="selectEvent(e)" class="item-text-wrap">
            <i class="icon ion-calendar"></i> &nbsp; {{e.displayDateTime}} &nbsp; <strong>{{e.name}}</strong>
        </item>
    </list>

</content>

simplified version of eventCheckin.html:

<header class="bar bar-header bar-dark">
    <h1 class="title">Event Check In</h1>
    <a class="button" href="#/event/choose">Events</a>
</header>

<tabs tabs-type="tabs-icon-left">
    <tab title="Check In" icon-on="icon ion-log-in" icon-off="icon ion-log-in">

        <content has-header="true" on-refresh="refreshAttendees()">
            <!-- for pull to refresh -->
            <refresher></refresher>

            <ul class="list wrapping-list" ng-hide="partyMode">
            </ul>
            <list class="wrapping-list" ng-show="partyMode">
            </list>

        </content>

    </tab>
    <tab title="Undo" icon-on="icon ion-ios7-undo" icon-off="icon ion-ios7-undo">

        <content has-header="true" on-refresh="refreshAttendees()">

            <!-- for pull to refresh -->
            <refresher></refresher>

            <ul class="list wrapping-list" ng-hide="partyMode">
            </ul>
            <list class="wrapping-list" ng-show="partyMode">
            </list>
        </content>

    </tab>
</tabs>

ajoslin commented 10 years ago

OK, the problem is that auth and tabs are in the same state (the 'root' state), and when pressing a tab for the second time it goes back to the root of that state.

Try this instead:

js:

app.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('auth', {
        url: "/auth"
        ,templateUrl: "templates/auth.html"
        ,controller: "AuthCtrl"
    })
    .state('tabs', {
      url: '/event'
      ,abstract: true
    })
    .state('tabs.chooseEvent', {
        url: "/choose"
        ,templateUrl: "templates/chooseEvent.html"
        ,controller: "EventsCtrl"
    })
    .state('tabs.eventCheckin', {
        url: "/checkin"
        ,templateUrl: "templates/eventCheckin.html"
        ,controller: "CheckinCtrl"
    })
    ;

Now when you go to any url that has '/event' at the top, it will enter a new 'tabs' state and create a new history.

ajoslin commented 10 years ago

Lemme know how it works for you, and reopen if you have more issues.

atuttle commented 10 years ago

I assume the abstract: true prevents this state from being navigable?

ajoslin commented 10 years ago

Yeah, that's right. Check out ui-router's documentation for more details on that.

ionitron-bot[bot] commented 6 years 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.

ionic-team / ionic-framework

Bug: Tapping a tab selector more than once redirects me to an entirely different view/route! #609