Unable to focus on inputs inside modals on touch devices

[jdhiro]

There is a related issue opened against angular, but I suspect this is an issue specifically with the modals. angular/angular.js#6432

Plnkr is here: http://embed.plnkr.co/gyNF9BhiaBuMtonPXYKS/preview

This repro requires:

1. Having an input inside of a UI Bootstrap modal box
2. Having angular-touch enabled (checked against 1.2 and 1.3)
3. Being on a touch device or using Chrome's touch emulation

Repro steps:
Click the button to open the modal, and then click on the text input field. On touch devices, the field will momentarily get focus and then lose it. With a normal mouse click, it's fine.

[jdhiro]

It looks like this probably is an angular-touch bug, so I'm going to close it out here. It's related to how the form has a parent element with ng-click (the background/fade), so this will fail in all circumstances were a form is inside of a modal if angular-touch is present.

I'm working around this in my own project by blocking touchend events from propagating past the modal form like this:

<div class="modal-body" stop-event="touchend">

With a directive like this:

  .directive('stopEvent', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attr) {
        element.on(attr.stopEvent, function (e) {
          e.stopPropagation();
        });
      }
    };
  });

[pedubreuil]

Could you detail your solution? I am facing the same issue...
Thank you in advance

[ichbinedgar]

Thank you, the directive works.

[kukac7]

👍 thx @jdhiro

[psychowood]

Problem is still present, why the issue is closed?

[numerized]

awesome fix ! I'll put a link to it for TextAngular users. Nice editor to use as a edit in place editor.

[MaestroJurko]

Is a fix present in angular-touch, because with 1.3.14 version it is not working and this workaround doesnt work 100%.

[GabrielDelepine]

In my point of view, the hack describe below is not a decent solution. We need a real fix. I will work on it.

[breynolds]

I agree with Yappli. This needs to be fixed. It's outrageous that something as simple as a modal window doesn't work across all mobile devices and this bug has been sitting here for a year. We shouldn't have to sprinkle directives all around our code and mess around with the event model just to get a simple modal to work.