Modal element is not removed if using animateProvider.classNameFilter

[equiet]

If there is a $animateProvider.classNameFilter(/whitelistedelement/) then https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js#L231 is never run (looks like the event is never triggered). As a result, the modal window is faded out, but never removed from the dom. It stays in the foreground with 0 opacity so that nothing on the page can be clicked.

Here's a plunk: http://plnkr.co/edit/hPMd9R2jsRzSivVxTUNg?p=preview
As you can see, you can open and close the modal only once.

This problem appeared in 0.13. It was working in 0.12 and 0.11. Not sure why, though.

Temporary fix: use $animateProvider.classNameFilter(/whitelistedelement|modal/).

[chrisirhc]

Thank you for reporting this. I was afraid I missed something. This will be fixed soon

[shawn-simon]

Is there a workaround for this for now? (besides animation: false on the $modal.open)

[germanger]

+1

[germanger]

With angular 1.4.0 this is not working anymore!

     angular.module('myApp').config(['$animateProvider', function($animateProvider){
           $animateProvider.classNameFilter(/modal/);
     }]);

[rvanbaalen]

@germanger FYI; As of this moment, a stable release of Angular 1.4 hasn't been released yet and thus UI Bootstrap doesn't support use of Angular 1.4 yet.

[hoeni]

+1 (with Angular 1.4)

[char0n]

The only workaround for angular 1.4 that I could find, is to set animation: false when creating new dialog.

Or use $modalProvider.options.animation = false;

[germanger]

Is it possible to set that ($modalProvider.options.animation = false;) via config and not in every modal?

[philBrown]

@rvanbaalen you're wrong about the official Angular 1.4 release. It was tagged 6 days ago (one day prior to your comment) ~ https://github.com/angular/angular.js/releases/tag/v1.4.0

[char0n]

@germanger yes it is:

$modal.open({
animate: true|false
});

[rvanbaalen]

@philBrown ah well.. Cant always be right 😉 thanks for correcting me.

[chrisirhc]

Resolved in #3895

Working Plunker: http://plnkr.co/edit/4gMUSzeLv65atc0flHFx?p=preview

[Sjors]

@char0n actually it's animation, not animate:

$modal.open({
   animation: true|false
});

Not very consistent though; the ui.bootstrap.progressbar does use animate.

[char0n]

Yep, thanks for correcting me.

On Tue, Jul 7, 2015 at 1:15 PM, Sjors Provoost [email protected]
wrote:

@char0n https://github.com/char0n actually it's animation, not animate:

$modal.open({
animation: true|false
});

Not very consistent though; the ui.bootstrap.progressbar does use animate.

—
Reply to this email directly or view it on GitHub
#3647 (comment)
.

Vladimír Gorej | CodeScale s.r.o.
email: [email protected]
tel: +420 777 861 279, +421 948 023 011
web: http://www.codescale.net

[wesleycho]

This looks like it has been fixed according to #3895 - closing as resolved.