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.

[bruteforce]

The hack suggested works only for input field.

[Sankluj]

A fix might be on the way for angular-touch :) angular/angular.js#11212

[persianturtle]

jdhiro's fix worked for select, textarea and checkbox fields in my case. Thank you!

[Veraprot]

this fixed the issue on android, however it didn't fix it on ios.

[salangar]

Is this the same problem? -
http://stackoverflow.com/questions/32367621/unable-to-display-right-tick-mark-in-checkbox-in-tablets-and-ipad

But I have already added $event.stopPropagation();

Thanks

[andycao]

this fix is working, although it is not best fix.
i can see the main reason of this bug is about touch and events from the fix, is it right?
thank you

[ericbj]

thanks jdhiro, works like a charm

[timum-viw]

Thanks. Saved me a lot of time and headaches

[dsiebeck]

The proposed directive from jdhiro works great for me. Thank you!

[wesleycho]

This seems resolved currently - see my comment in #4214 (comment), it does not display the prior behavior anymore.

[marcelkalveram]

If anyone is struggling with an issue where the modal loses focus when clicking inside a text input field inside the modal, I've been able to resolve it by setting:

.modal { position: absolute }

It looks like position is fixed by default and this was causing some weird behaviour for me in iOS Safari.
BTW: I'm appyling above mentioned workaround as well.

[icfantv]

@marcelkalveram, I would argue that modals on a mobile device are quite poor UX. Same with tooltips and popovers.