(modal) Problem when opened by a double-click #1212
Description
Hi there guys, I'm new to this, so please be nice.
I've encountered a minor problem when using my application with IE 11.0.9600.16384.
In my app, there is a call to open a modal when the user double-click a row on a grid (external component that I integrated via directive). I also tested the same thing with a plain old "button" and the same happened.
The problem is that the mouse-up from the last click of the double-click gets captured by the backdrop and causes the modal to close, because it interpreted that as a click. So the modal window doesn't even get to finish showing.
This did not happen on Chrome nor Firefox, only on IE.
(I've not tested on all browsers by laziness, off course)
So, I came up with the solution below, I don't really know how to make a commit or anything, and I don't even know if this kind of "hack" is permitted. Nonetheless I leave here the issue and what I did to overcome it, perhaps a more elegant solution can come out of this.
Thanks, I hope this can help.
(changes are in bold)
.directive('modalBackdrop', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/modal/backdrop.html',
link: function (scope, element, attrs) {
//trigger CSS transitions
$timeout(function () {
scope.animate = true;
});
scope.ieBlocked = true;
$timeout(function () {
scope.ieBlocked = false;
}, 500);
scope.close = function (evt) {
if (scope.ieBlocked) {
evt.preventDefault();
evt.stopPropagation();
return;
}
var modal = $modalStack.getTop();
if (modal && modal.value.backdrop && modal.value.backdrop != 'static') {
evt.preventDefault();
evt.stopPropagation();
$modalStack.dismiss(modal.key, 'backdrop click');
}
};
}
};
}])