Class menu-open disables page interactions after transition while side menu is closed

ionic-v1
1

Hello I am experiencing strange issue.
After transition from a login page I can’t tap on any buttons that are located in ion-side-menu-content due to the fact that after the transition the framework adds .menu-open class to <body> html tag. This disables interactions with buttons on nested view. However the side menu toggle button is active!

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.

Here is the menu.html:

<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 main-page.html:

<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>

After transition from login state to nested app.main-page my body html tag looks like so:
<body ng-app="EmpDirApp" class="grade-a platform-browser platform-macintel platform-ready menu-open">

If I refresh app.main-page using browser refresh button my body html tag does not have .menu-open class:
<body ng-app="EmpDirApp" class="grade-a platform-browser platform-macintel platform-ready”>

Does anyone know how can I address this issue?

Thanks a lot for your help!

2

Here is the link to a github issue:

3

My bad. This is totally my fault. I found a problem in my code. The problem was that on logout button click I was just redirecting to a login page without closing side menu with menu-close directive. After adding menu-close directive to my logout button the class of .open-menu is properly removed.