Why an ionic modal freezes the UI when it is closed or submitted?

Question

I have a popover which two options -Add Favorite and Add Comment-, the first options is working correctly: it does not freeze the user interface; but the second one once the form is omitted or submitted freezes the interface. This is what is happening:

Note how when I close the form the interface does not respond.

This is the code I have used to create the popover and and modal:

$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{
scope: $scope}) 
.then(function(popover){
    $scope.popover = popover;
});

$scope.openPopover = function($event){
    $scope.popover.show($event);
}

$scope.closePopover = function() {
    $scope.popover.hide();
}; 

$ionicModal.fromTemplateUrl('templates/dish-comment.html', {
    scope: $scope
}).then(function(modal) {
    $scope.commentModal = modal;
});

// Triggered in the reserve modal to close it
$scope.closeAddComment = function() {
    $scope.commentModal.hide();
};

// Open the reserve modal
$scope.showCommentModal = function($event) {
    $scope.closePopover();
    $scope.commentModal.show($event);
};

The template for dish-detail-popover.html:

<ion-popover-view>
    <ion-content>
      <div class="list">
        <a class="item" ng-click="addFavorite(dish.id)">
          Add to favorites
        </a>
        <a class="item" ng-click="showCommentModal()">
          Add Comment
        </a>
      </div>
    </ion-content>
</ion-popover-view>

and the template for dish-comment.html:

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Submit Comment on Dish</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeAddComment()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form id="comentDishForm" name="comentDishForm" ng-submit="doComment()">
      <div class="list">
        <label class="item item-input item-select">
          <span class="input-label">Rating</span>
            <select ng-model="comment.rating">
                <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option>
            </select>
        </label>
        <label class="item item-input">
          <span class="input-label">Your Name</span>
          <input type="text" ng-model="comment.author">
        </label>
        <label class="item item-input">
          <span class="input-label">Your Comment</span>
          <input type="text" ng-model="comment.comment">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Submit</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

NOTE: When the form is called from the Add Comment button (the green one), it works correctly. The failure is related when it called from the popover.

Some suggestions, or ideas,... to solve this?

Answer 1

The screen gets freezed because despite closing the popover before opening the modal, the body tag remains dirty with the class 'popover-open'. A quick solution, but not the neatest, is to close the popover again when closing the modal. This way, ionic framework will remove the class 'popover-open' from the body tag. Example:

$scope.$on('modal.hidden', function() {
    $scope.closePopover();
});

Hope it helps.