fix(modal): fix for conflicts with ngTouch module on mobile devices

[jiniguez]

This change attempts to fix issue #2280

ng-click directive has been removed from modal template and click event moved to the modal-window directive code, so the click event keeps firing and modal window closes when clicking on the backdrop. Not sure if there's a better place to put this event but the fix seems to be working.

[jbielick]

Why does the modal window need to close when clicked? It isn't the backdrop, it isn't a close button. When it was in the template, I'm not sure it did anything at all.

[jiniguez]

Yes, it does. It's used to dismiss the dialog if you click on the backdrop. The way it's implemented might be a bit misleading though. The fact that there's a modalBackdrop directive also led me to confussion at first, as I thought that the modalWindow directive was just the dialog without a backdrop.

If you take a look at the template https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html , there's a parent div with a class "modal" that actually fills the whole screen, with a z-index higher than the visual backdrop, so it will capture all click events when you hit the backdrop. There's also a child div with a class "modal-dialog" that will contain the actual dialog.

So, if you click outside the modal-dialog, a click event will be raised by the parent div. The close function checks if the event was fired from this element and not from any of its children. If this condition is met, the dialog is dismissed.

https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js#L113

[jbielick]

Why does the modal window need to close when clicked? It isn't the backdrop, it isn't a close button. When it was in the template, I'm not sure it did anything at all.

[jiniguez]

Yes, it does. It's used to dismiss the dialog if you click on the backdrop. The way it's implemented might be a bit misleading though. The fact that there's a modalBackdrop directive also led me to confussion at first, as I thought that the modalWindow directive was just the dialog without a backdrop.

If you take a look at the template https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html , there's a parent div with a class "modal" that actually fills the whole screen, with a z-index higher than the visual backdrop, so it will capture all click events when you hit the backdrop. There's also a child div with a class "modal-dialog" that will contain the actual dialog.

So, if you click outside the modal-dialog, a click event will be raised by the parent div. The close function checks if the event was fired from this element and not from any of its children. If this condition is met, the dialog is dismissed.

https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js#L113

[aktary]

Thank you for this solution! This solved my problem. When is it going to be merged??

[tomasreichmann]

Hi guys, sorry, for such a noob question:
Is it possible to download a production ready minified version of ui-bootstrap-tpls-0.12.#.min with this fix included? Ideally a link or CDN.

Thanks

[karianna]

Not that I'm aware of sorry (I'm new here myself)

[karianna]

@chrisirhc - This was the other PR I merged without cherry picking - shall I revert and add a REady to Merge label?

[adamreisnz]

Has this change been reverted again? When I download the latest version (0.13.0), looking in the template code for modals, I find ng-click=\"close($event)\"> is back.

This is still causing issues when ngTouch is enabled.

[dubejf]

Yes, the merge was reverted by @chrisirhc. Why?

[chrisirhc]

Sorry, I reverted it initially because it didn't follow our merging guidelines. And I believe we forgot about re-applying the change since then. Reopening #2280 to avoid confusion.

[philefstat]

Looking forward to this fix being re-merged at some point...

[piotrd]

Looking forward to this fix being re-merged at some point...

👍

[twhamilton]

+1 Please !

[khoacoi]

• 1 please

[khoacoi]

Hi,

Is there any update when this change can be merged? Is there any work around solution to fix this issue?

Thanks,

[twhamilton]

The fix is in one of the links above.

This is what I did..

in ui-boostrap-tpls.js
//***********************************************
// REMOVED ng-click="close($event)" to fix issue #2280
// #2280
//*******************************************************************************************
angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/modal/window.html",
"<div modal-render="{{$isRendered}}" tabindex="-1" role="dialog" class="modal"\n" +
" modal-animation-class="fade"\n" +
" modal-in-class="in"\n" +
" ng-style="{'z-index': 1050 + index*10, display: 'block'}">\n" +
" <div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" modal-transclude>\n" +
"\n" +
"");
}]);

/* THIS WAS THE ORIGINAL
angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/modal/window.html",
"<div modal-render="{{$isRendered}}" tabindex="-1" role="dialog" class="modal"\n" +
" modal-animation-class="fade"\n" +
" modal-in-class="in"\n" +
" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">\n" +
" <div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" modal-transclude>\n" +
"\n" +
"");
}]);
*/

Then in ui-boostrap.js added the element.on function

.directive('modalWindow', [
'$modalStack', '$q', '$animate',
function ($modalStack , $q , $animate) {
return {
restrict: 'EA',
scope: {
index: '@'
},
replace: true,
transclude: true,
templateUrl: function(tElement, tAttrs) {
return tAttrs.templateUrl || 'template/modal/window.html';
},
link: function (scope, element, attrs) {
element.addClass(attrs.windowClass || '');
scope.size = attrs.size;

    //****************************** 
    // moved from template to fix issue #2280
    // https://github.com/angular-ui/bootstrap/issues/2280
    //*******************************************
    element.on('click', function(evt) {
      scope.close(evt);
    });

    scope.close = function (evt) {
      var modal = $modalStack.getTop();
      if (modal && modal.value.backdrop && modal.value.backdrop != 'static' && (evt.target === evt.currentTarget)) {
        evt.preventDefault();
        evt.stopPropagation();
        $modalStack.dismiss(modal.key, 'backdrop click');
      }
    };

[mastef]

@chrisirhc Anything specific that was wrong in the PR? Would love to resubmit PR to have this implemented. Could you point at the right direction what was wrong with the PR?

[icfantv]

@mastef, I don't think there'll be any issues, but given the age of this, please rebase and ensure your code is fully up-to-date and that this PR would still have no conflicts.

additionally, we've since implemented a CI build that will get kicked off when you submit a PR that was clearly instituted after you submitted this originally. I don't know that we'll require it given the nature of this change, but it might be nice just for sanity sake. @wesleycho, would you have any hesitations merging this as is or if you had other stipulations, what would they be?

[chrisirhc]

I don't think there were any issues (besides lack of tests, but I'm not sure how to test, and that shouldn't block it), it just needs to be re-cherry-picked into the code.

[wesleycho]

I'm still a bit baffled why this fixes the issue, but I fon't have any particular objections if it works

[chrisirhc]

I believe it's because ngTouch adds an ngClick directive that attempts to be smart about detecting where you're tapping. However, in this case, it incorrectly detects tapping on the modal while it should instead tap into elements within the modal.