$ionicPopup: e.preventDefault() gets ignored

Question

I'm using the following code for some validation stuff using both $ionicPopup and Firebase:

onTap: function(e) {
    firebase.auth().applyActionCode($scope.data.emailcnfrm)
        .then(function() {
            return $scope.data.emailcnfrm;
        },
        function(error) {   
            alert("wrong code");
            e.preventDefault();
        });
}

But In the case of error, and after I get the "wrong code" alert, the popup gets closed, as e.preventDefault(); has been ignored.

So what's exactly wrong in my code? and how can I fix this problem?

Answer 1

Your call to firebase.auth().applyActionCode is asynchronous, and e.preventDefault will be called asynchronously in the error callback. This happens after the user has already invoked onTap, thus e.preventDefault won't have any effect.

Edit (a proposed fix)

To fix it, you could separate the async logic from the onTap method:

var myPopup = $ionicPopup.show({
  onTap: function(e) {
    // always keep the popup open, because we'll decide when to close it later
    e.preventDefault();
  }
});

myPopup.then(function(res) {
  firebase.auth().applyActionCode($scope.data.emailcnfrm)
  .then(function() {
    // if successful, imperatively close the popup
    myPopup.close();
  }, function(err) {
    // log the error, or something
  });
});

Answer 2

Finally I solved the problem by using my own trick:

-outside Async:

         $scope.myPopup = $ionicPopup.show({

             scope: $scope, buttons: [

             { text: 'Cancel' },

             {                  
                 text: '<b>Done</b>',

                 type: 'button-positive',

                 onTap: function(e)
                 {

                 // always keep the popup open, because we'll decide when to close it later
                 e.preventDefault();

                 $AsyncCallback();
                 }
             }
             ]
         });

$scope.myPopup.then(function(){},
                             function(error)
                             {
                                 $ionicPopup.alert({

                                 title: 'Internal error!',

                                 template: error
                                 });
                             });

-inside async:

$scope.myPopup.close();