Popup stacks - Backdrop not releasing?

ionic-v1
1

Hi there,

I recently updated from beta 11 to 13 and noticed a problem with a popup stack in my application: the app runs through the popups just fine, but the backdrop isn’t removed from the DOM after dismissing the final popup.

My code is as follows:

  $scope.completeProfile = function() {
    $scope.gotCoupon = $ionicPopup.show({
       templateUrl: './partials/popups/gotcode.html',
       title: 'Have you got a coupon to redeem?',
       scope: $scope
    });
   $scope.titleSelect = $ionicPopup.show({
       templateUrl: './partials/popups/titleSelect.html',
       title: 'Please select your title',
       scope: $scope,
       buttons: [
          {
            text: '<i class="check-icon-empty"></i>',
            type: 'circle-ok',
            onTap: function(e) {
              if (!$scope.profile.title) {
                e.preventDefault();
              } else {
                return $scope.profile.title;
              }
            }
          },
        ]
      }).then(function(res) {
        $scope.updateProfile();
      });
      $scope.nameSelect = $ionicPopup.show({
        templateUrl: './partials/popups/nameSelect.html',
        title: 'Welcome!',
        subTitle: 'Please help us complete your profile',
        scope: $scope,
        buttons: [
           {
            text: '<i class="check-icon-empty"></i>',
            type: 'circle-ok',
            onTap: function(e) {
              if (!$scope.profile.name) {
                e.preventDefault();
              } else {
                return $scope.profile.name;
              }
            }
          },
        ]
      });
    };

In the betas before 12/13 this used to work just fine. I believe some changes were made to the way the backdrop is being used? Not sure if I’m using the popups in a way they weren’t intended to be used… Hope you guys have ideas on how to make this work again!

Thanks a bunch!

Max

2

I have the same problem with beta14

3

Did you find a solution to this?

4

+1
I have the same problem, posted it month ago but no fix.

5

Can you provide a codepen for this?

6

I found a solution, at least to my similar problem.

Within “ionic.bundle.js” I found the following code:

var previousPopup = popupStack[0];
    if (previousPopup) {
      previousPopup.show();
    } else {
      //Remove popup-open & backdrop if this is last popup
      $timeout(function() {
        // wait to remove this due to a 300ms delay native
        // click which would trigging whatever was underneath this
        $ionicBody.removeClass('popup-open');
      }, 400);
      $timeout(function() {
        $ionicBackdrop.release();
      }, config.stackPushDelay || 0);
      ($ionicPopup._backButtonActionDone || angular.noop)();
    }

If “previousPopup” is truthy (multiple popups exist and one was closed but not the last one) the following code would execute:

if (previousPopup) {
      previousPopup.show();
    }

The problem is that the $ionicBackdrop has mutiple “backdropHolds” - each popup registers an additional “backdropHold”. So if “previousPopup” is truthy, $ionicBackdrop.release() doesn’t get executed and doesn’t remove a registered “backdropHold”.

To resolve this issue, i added the following to the code:

if (previousPopup) {
      previousPopup.show();
      //My added code to remove the $ionicBackdrop when more than 2 popups appear at the same time
      $timeout(function() {
        $ionicBackdrop.release();
      }, config.stackPushDelay || 0);
      //end of My added code
    }

I hope this helps someone.

Thanks!