Ionic app freezes or stops working after popover and modal closes

Question

I have an ionic app that has a side-menu, a pop-over, and a modal.

In a page, there is a grid table.
A user can select a row to highlight it.
A user can then open the pop-over and either View or Edit the row.
Upon selecting view or edit, a modal will open.
In the modal, a cancel button in the upper right corner can be clicked to close the modal.
After closing the modal, all clicks, touch, swipe, etc. are not being read by the app anymore.

Here are the codes for popover, and modal.

JS

// MODAL
$ionicModal.fromTemplateUrl('templates/modals/view-product.html', {
  scope: $scope,
  animation: 'slide-in-up'
})
.then(function(modal) {
      $scope.viewModal = modal;
  });

  $scope.openModal = function(modal) {
    $scope[modal].show();
  };
  $scope.closeModal = function(modal) {
    $scope[modal].hide();
  };


// POPOVER
  $ionicPopover.fromTemplateUrl('templates/popovers/list.popover.html', {
      scope: $scope,
  }).then(function (popover) {
      $scope.popover = popover;
  });

HTML

<!-- POP OVER -->
<ion-popover-view class="fit">
    <ion-content>
        <div class="list">
            <a class="item" ng-click="viewProduct(this); popover.hide()" ng-bind="lblView"></a>
            <a class="item" ng-click="editProduct(this); popover.hide()" ng-bind="lblEdit"></a>
        </div>
    </ion-content>
</ion-popover-view>

<!-- MODAL -->
<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">Viewing Product</h1>
        <button class="button button-clear button-primary" ng-click="closeModal('viewModal')">Cancel</button>
    </ion-header-bar>
    <ion-content class="padding">
        <div class="list">
           <!-- list here -->
        </div>
    </ion-content>
</ion-modal-view>

Gabriel Martins · Answer 1 · 2016-11-12T09:39:22.207

2

Here I solved it closing the popover and using a timeout before opening the modal, look

    $scope.openModal = function(){
        if(!$scope.modal) return;       

        // Call a function to close the popover
        $scope.closePopover();      

        // Set a timeout to show the modal only in next cycle
        $timeout(function(){
            $scope.modal.show()
        }, 0);
    });

edited Nov 12 '16 at 09:39

answered Nov 12 '16 at 09:26

Gabriel Martins

537
4
12

Obnoxious that something so basic requires a workaround, but this works. Thanks. – everythingfunctional Jan 19 '17 at 02:57

score 1 · Answer 2 · answered Nov 10 '16 at 00:38

1

It appears that this issue is already a known bug and is already listed in ionic issues tracker:

https://github.com/driftyco/ionic/issues/8582

I guess I'll just wait for it to be answered in the link above.

answered Nov 10 '16 at 00:38

clintgh

2,039
3
28
44

score 0 · Answer 3 · answered Nov 08 '16 at 17:35

Just prepared a little playground example, maybe you could compare your solution with it to identify what's the problem there.

http://play.ionic.io/app/89ab5ebbb236

Notice that I actively hide the popover when showing the modal - might this be the issue, have you done that in your application?

So at first sight I'm not able to reproduce the issue. If the provided example does not help you it would be interesting to know if you get any errors in the console though.

I added the HTML code of popover and modal in the question, it might help to check again. Thanks — clintgh, Nov 09 '16 at 00:17

score 0 · Answer 4 · answered Mar 05 '17 at 09:22

0

This should be helpful.

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

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

answered Mar 05 '17 at 09:22

Neven.Leung

820
6
12

score 0 · Answer 5 · answered Jul 11 '17 at 07:44

0

I had similar problem in my ionic 2 application. I solved it by using "this.navCtrl.pop()" to close the modal insted of using "dismiss()" function.

Note: Do not use "this.setRoot()" function right after closing the modal

answered Jul 11 '17 at 07:44

Bhagwat

11
1

score 0 · Answer 6 · answered Jun 07 '22 at 00:51

The quick fix for this issue is an easy CSS class, no need for any JS workarounds.

In your custom css file

.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }

This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.

Ionic app freezes or stops working after popover and modal closes

6 Answers6