disable-pointer-events not being removed after transition

[deedubbleyoo]

We are experiencing a bug:

When automatically transitioning from our login to home page (on successful login), the page elements are un-clickable.

We noticed that the disable-pointer-events class was still applied to the body.
From what I can understand in the code, this class is applied at the start of an animation, and then removed after it.

Given that this behaviour disappears as soon as we remove the animation parameter from the body tag, it leads me to believe that the animation code is not removing the class as intended.

When viewing in a browser, refreshing the page makes elements interactive again.
We have place a temporary fix to manually remove that class from body on stage change success, but obviously would prefer things just to work as intended.

I apologise for not writing a codepen, It's hard to replicate the issue on a code snippet.

[adamdbradley]

Would you still be able to provide a codepen that would replicate the issue? Between your description and code it'll help us narrow down the issue, thanks.

[deedubbleyoo]

Hi,

I've tried recreating the 'perfect storm' to replicate the bug in a snippet but finding it difficult - I will try and get some time away from the normal work to put something together.

[adamdbradley]

Thank you for submitting the issue, but until we're able to replicate this I'm going to close the issue. Please feel free to reopen if you find more information. Thanks.

[deanq]

I am experiencing this issue. To replicate, have $ionicLoading.show() and then the transition occurs before executing $ionicLoading.hide(). It eventually hides, but the removal of "disable-pointer-events" does not occur.

[deanq]

Nevermind. That wasn't really the issue at all. I have turned off all animation between transitions, and I am still getting a stuck "disable-pointer-events". This consistently happens after my login screen.

[deanq]

I have fixed it by being careful with changing between states. It was occurring whenever I had a state that immediately redirected to a different state before the previous animation was finished. For example:

.controller('StartCtrl', function($scope, $state,
  Session) {

  ionic.Platform.ready(function() {
    if (Session.user()) {
      $state.go('home');
    } else {
      $state.go('welcome');
    }
  });

})

So yeah... don't redirect immediately after a previous redirect!

[adamdbradley]

http://forum.ionicframework.com/t/after-transition-screen-is-stuck-for-awhile-due-to-body-disable-pointer-events/5948

[okonon]

Hello I am experiencing same issue. After transition from a login page I can't tap on any buttons but side menu button.
Transition is from a login page with regular state to a nested state page. Here are my states:

    $stateProvider
        .state('login', {
          url: '/login',
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
        })
        .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: 'templates/menu.html',
          controller: 'MenuCtrl'
        })
        .state('app.main-page', {
          url: '/mainpage',
          views: {
            'menuContent' :{
              templateUrl: 'templates/main-page.html'
            }
          }
        })

So here I go from login state to app.main-page state which is a child of app state.
The strange thing is that pointer events only disabled on buttons of the child state! Not parent 'app' state. So only menu button on a parent scope is working.
Here is the html of app state:

    <ion-side-menus>

  <ion-pane ion-side-menu-content>

    <ion-nav-bar class="bar-positive" hide-back-button="true">
      <ion-nav-back-button class="button-clear">
        <i class="icon ion-ios7-arrow-back"></i>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

    </ion-pane>

    <ion-side-menu side="right">
    <header class="bar bar-header bar-positive">
      <h1 class="title">MENU</h1>
    </header>
    <ion-content class="has-header stable bg-dark">
      <ion-list>
        <ion-item class="item-icon-left">
          <i class="icon bh-user"></i>
          Logged in as:
          <span class="calm">
            <b>
              {{user.firstname + " " + user.lastname}}
            </b>
          </span>
        </ion-item>
        <ion-item class="item-icon-left" ng-click="goTo('app.main-page')">
          <i class="icon bh-bookmark"></i>
          Main Menu
        </ion-item>
        <ion-item class="item-icon-left" ng-click="goTo('app.help')">
          <i class="icon bh-information"></i>
          App Instructions
        </ion-item>
      </ion-list>
      <button class="item button button-full button-assertive item-icon-right" ng-click="logout()">
        <i class="icon ion-log-out"></i>
        Log Out
      </button>
    </ion-content>
     </ion-side-menu>
    </ion-side-menus>

Here is the html of child app.main-page:

    <ion-view title="MAIN MENU" hide-back-button="true" xmlns="http://www.w3.org/1999/html">
  <ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <!--Notification bar-->
  <notification-bar class="bar-msg"></notification-bar>
  <ion-content class="has-header padding" ng-class="{'has-msg': displayNotif}">
    <!--<div class="list list-inset background-grey">-->
    <div class="login-title">Page</div>
    <div class="row">
      <div class="col">
    < a href="#/app/employees" class="button button-block button-dark bhbutton-main">
      <i class="icon bh-search bhicon-main"></i>
      Search Employees
    </a>
  </div>
  <div class = "col">
    < a href="#/app/recentactivity" class="button button-block button-dark bhbutton-main">
      <i class="icon bh-chat bhicon-main"></i>
      Recent Pages
    </a>

      </div>
    </div>
  </ion-content>
    </ion-view>

So I my problem is that pointer events are disabled only on a child page of a parent.

I will try to put a codepen together to try to replicate the issue.

[okonon]

Also changing from $state.go('app.main-page); to $location.path('/app/mainpage').replace(); does not fix the issue.

[thetwosents]

This is still an issue unfortunately and can't find the solution :/

[craigwduckett]

I too am having this issue. This occurs when I have a popover open which has a link to a modal.
It would seem the popover-open class is not being removed before the modal opens.
I fixed it by adding a timeout of the model.open.

function showSwitchUserModal(e) {
  e.preventDefault();
  vm.staffPopover.hide();
  $timeout(function(){
    vm.switchUserModal.show(e);
  }, 100);
}

or of course use the promise

function showSwitchUserModal(e) {
  e.preventDefault();
  vm.staffPopover.hide().then(function(){
     vm.switchUserModal.show(e);
  });
}