ngMobile does not prevent ghost focus on form inputs after CSS transition

[damrbaby]

Webkit based browsers synthesize mouse events roughly 300ms after the touchend event, which can cause form fields to undesirably gain focus after a CSS3 transition.

This issue has been addressed by fastclick: ftlabs/fastclick#27

My workaround is to disable and re-enable text inputs and textareas on $viewContentLoaded (not pretty):

$rootScope.$on '$viewContentLoaded', ->
  $('input[type=text], textarea').attr('disabled', true)
  $timeout ->
    $('input[type=text], textarea').removeAttr('disabled')
  , 1000

I also added the following CSS so disabled text inputs look like regular ones on iOS::

input[type="text"]:disabled
  opacity: 1
  -webkit-text-fill-color: black

[bshepherdson]

There is code in ngMobile to prevent these ghost clicks. I had noticed some problems with the highlighting sticking on buttons on Android, which is annoying but not terrible. I hadn't seen anything like this before.

Looking at that patch, there probably isn't any reason why we can't do the same in ngMobile. When I can shake loose some 20% time to work on this, I'll take a look.

[damrbaby]

@shepheb Thank you! Let me know if there's anything I can do to help

[damrbaby]

FYI ... I solved this issue by including both ngMobile and fastclick in my app. They don't seem to conflict with each other and fastclick seems to solve the problem I had with ghost focusing occuring after CSS transitions.

An additional benefit to having fastclick is that it also removes the delay that occurs when focusing on form inputs on iOS.

[calvinl]

@damrbaby I'm having this issue too, but I can't seem to resolve it by including fastclick. Can you tell me how you've included it in your angular app?

[damrbaby]

@calvinl I'm using fastclick 0.6.7 in conjunction with ngMobile / angularjs 1.1.5. So make sure you are still including ngMobile. It seems to work most of the time that way but there can be edge cases once in a while.

# Fastclick works in conjunction with ngMobile to prevent ghost focus after CSS transitions
# It also remove input focus delay on iOS
# https://github.com/angular/angular.js/issues/2810
window.addEventListener 'load', ->
  FastClick.attach document.body
, false

angular.module('myapp', ['ngMobile'])

[calvinl]

Yeah, I'm including ngMobile too. I just tried both 0.6.7 and the latest (0.6.9) and I'm still getting the extra ghostclick on my form fields 100% of the time. I tried your hack and it works, but like you said it's not really pretty.

[damrbaby]

Yeah I hate my initial hack :) I'm wondering if you are using CSS transitions, and if so, what the duration is for them. I've noticed that the ghosclick happens when the transition happens immediately, vs. when it happens 300ms. Either way this is something that should be fixed in angular itself.

[calvinl]

That's an interesting thought...the transitions are CSS3 and are set at 500ms right now. I'll play around with the timing and report back.

[damrbaby]

FYI I switched to just using fastclick instead of ngMoble altogether, and I am no longer getting unwanted focus of the soft keyboard, which I have found happens with current ngMobile when transitioning between views with or without CSS3 transitions.