Closing modal quickly leaves modal-open style on body

[gillius]

Exists in: angular-ui-bootstrap 1.1.0 + Angular 1.4.8, 1.4.9, 1.5.0-rc.1, whether ngAnimate is present or not.
Does not exist in at least: angular-ui-bootstrap 0.11.0 + Angular 1.2.28 without ngAnimate

Closing the modal before the open animation finishes leaves the modal-open style on body, which eliminates the scroll bar.

http://plnkr.co/edit/3712x2?p=preview

I discovered this regression when upgrading from Angular 1.2.28 and angular-ui-bootstrap to the latest. The presence (or not) of ngAnimate does not seem to matter.

One workaround is to use $timeout to close, but that is brittle and it would have visible artifacts, and I have to just guess at the right amount of time to wait.

Relevant pattern:

        var mi = $uibModal.open({
            //whatever
        });

        //very shortly after:
        mi.opened.then(function() {
            mi.close();
        });

Here is my use case. I issue an AJAX call to perform a potentially long operation in my app. After 500ms, if the operation is not complete I open a "please wait" modal. Once the operation completes I close the modal as seen above (calling close won't work if the modal isn't finished opening yet, so I use the promise). However if operation completes in a total of 501ms for example, the modal is requested but then I want to close it right away.

[gillius]

I found a global workaround. Also I noticed that for whatever reason, the closed promise doesn't work. So, I apply and remove the styles myself on open and result.finally:

    angular.module('webApp').decorator('$uibModal', function($delegate) {
        var baseOpen = $delegate.open;

        $delegate.open = function() {
            var options = arguments[0];
            var openedClass = 'modal-open';
            if (options) {
                openedClass = options.openedClass || 'modal-open';
                options.openedClass = "ignoreThisClass"
            }
            var mi = baseOpen.apply(this, arguments);
            var body = angular.element(document.body);
            body.addClass(openedClass);

            //Use result finally, because for whatever reason, closed never resolves
            mi.result.finally(function() {
                body.removeClass(openedClass);
            });

            return mi;
        };

        return $delegate;
    });

[icfantv]

At first glance, this looks like a good catch and a bug. Thanks for the good writeup.

[vltr]

I'm bumping into this same bug! @gillius, thanks for the workaround!

[wesleycho]

The problem here is that the animation is ongoing - we don't have a good mechanism for cancelling opening & closing the modal when it happens.

This probably needs to be looked into, but on the user side, I'd recommend blocking canceling it until the opened promise is resolved.

[gillius]

I already do that. On both 0.11.0 and 1.1.0 I have to wait for opened promise to resolve before calling close, or nothing happens (it doesn't actually close). You can see in my example above that's exactly what I'm doing. The difference is that in 0.11.0 the modal-open is removed from the body but in 1.1.0 the modal-open class remains. My workaround is to manually add and remove modal-open myself.

[vltr]

Same here, confirmed! :)

[icfantv]

Hey guys, it sounds like there are at least two workarounds present so let's please refrain from cluttering up the thread with information that doesn't directly assist in finding a good solution for this issue. Thanks.

[vltr]

I was just verifying the information that @gillius gave, and it is correct. Even though I made this, the body class modal-open remained. The only workaround is the one suggested by @gillius . Sorry if I wasn't specific enough,

[icfantv]

@vltr - Much appreciated, thank you.

[wesleycho]

The rendered promise seems to resolve too early. Here is a reproduction based on 1.1.2.

[vltr]

You're the man! Awesome, thanks!! :)