How To Handle 'Possibly Unhandled Rejection: Backdrop Click' In A General Way

I have an angular service for handling modals: angular.module('myApp').service('ModalService', function($uibModal) { function open(options) { return $uibModal.open(options);

Solution 1:

Unfortunately that's how they handle it in The official Plucker for Modal (ui.bootstrap.modal).

If you click on any button it logs something like this:

Modal dismissed at: Thu Feb 23 2017 21:54:26 GMT-0300 (Pacific SA Daylight Time)

What they do is:

modalInstance.result.then(function (selectedItem) {
  $ctrl.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

If you remove the error callback, guess what you get:

Possibly unhandled rejection: backdrop click

And even on cancel

Possibly unhandled rejection: cancel

So far, you either do that or use this workaround to silence unhandled rejections

app.config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }]);

Solution 2:

use this

 $uibModal.open({
                    ////your code......
}).result.then(function(){}, function(res){})

now it will not give you error

Solution 3:

UI Specification dependent.

This is NOT the greatest workaround if there are UI specifications that the end-user must be able to click OUTSIDE the modal to close the modal.

If that is NOT the case and there is a little 'x' on the top right of the modal and/or there is a close

backdrop: false, // <<< !!!!!!! (see code below)
will prevent the end-user from clicking OUTSIDE the modal to close the modal.

$scope.change = function (changeableData, p_Mode) {
    var modalInstance = $uibModal.open({
        templateUrl: whatever,
        controller: ModalInstanceCtrl,
        scope: $scope,
        backdrop: false,  // <<< !!!!!!!
        resolve: {
            // whatever
        }
    });  

This will prevent the error "Possibly unhandled rejection: backdrop click" from occurring.

Once again, you need to look at the UI specifications and/or get permission from the analysts to implement this.

Solution 4:

If you're using a controller within your modal. I used this on the closing event. Because 'Closing' is valid but 'Dismissing' is a rejection. This goes within your modal controller, not the parent.

            $scope.$on('modal.closing', (event, reason, closed) => {
                if (!closed) {
                    event.preventDefault();
                    $scope.$close("Closing");   
                }

            });

So your backdrop click will fire the closing event but closed will be passed false. If that's the case, prevent the default behaviour, and programmatically close the modal instead of dismiss. Bare in mind this will break use of dismiss, if you want to use it for its original purpose.