ngTouch: iOs form elements loose focus when tapped to enter text (textareas,inputs) #6432

doner-astogdill · 2014-02-24T21:37:09Z

While developing using ngTouch in an angular project I found that when tapping on a form field to enter text the keyboard would open and immediately close. I looked into ngTouch and found that line 308:

    // Blur focused form elements
    event.target && event.target.blur();

Was causing this. Once removed everything worked fine with no issues in my project. May want to look into a work around that would still allow function with iPad text entry.

ashleygwilliams · 2014-02-28T00:25:41Z

hi @doner-astogdill! could you provide a plnkr or a fiddle that demonstrates this behavior? thanks so much!

jdhiro · 2014-04-03T07:13:13Z

I can repro this and put a plunk together: http://plnkr.co/edit/gyNF9BhiaBuMtonPXYKS

At the moment I can only repro it in a UI Bootstrap modal, and ONLY on touch input devices (including touch emulation in Chrome). I haven't dug any deeper on it yet.

jdhiro · 2014-04-03T08:15:54Z

I tried commenting out the line event.target && event.target.blur(); and nothing was fixed, so I'm skeptical this is even the same issue.

jdhiro · 2014-04-03T08:56:33Z

Correction, removing both of the following lines resolves the issue:

line 320 event.target && event.target.blur()
line 415 tapElement.blur();

I'll try to dig further tomorrow into why these are blurring forms in some places but not others.

jdhiro · 2014-04-03T22:10:34Z

OK, it appears that what is going on in my case (and probably the case of the OP) is that the form is wrapped in another element with an ng-click. touchend is firing as part of the parent element, which calls into preventGhostClick and sets a new lastPreventedTime. This confuses the onClick function on line 280.

This is evident by watching this function on line 281:

    if (Date.now() - lastPreventedTime > PREVENT_DURATION) {
      return; // Too old.
    }

On a normal form click, the lastPreventedTime is old, so the if statement is true and goes to return right away. However, if you have a form wrapped in a parent with ng-click, you end up with a lastPreventedTime of like 2 milliseconds ago and you start walking into code that calls blur().

This does actually seem like a bug in angular-touch to me. I don't think lastPreventedTime should be getting set/checked back to back on the same touch like this. That said, I'm not sure what the proper fix should be. I'll likely work around this by blocking touchend events in my own project.

soncodi · 2014-04-13T09:04:15Z

Ran across this issue with an input[type="text"] inside of a form within a bootstrap3 modal-body. Commenting line 320 event.target && event.target.blur() seems to fix it at first glance, but I haven't looked into it thoroughly.

Can repro on Cordova app on a Nexus5 and touch emulation mode in Chrome on Linux.

project707 · 2014-04-21T23:39:45Z

I just ran into this exact same issue, also within an Angular UI Bootstrap modal. It appears that the two libraries are currently incompatible in this respect as it doesn't allow normal focus even if the only element in the modal is the input.

Interestingly, it seems that you can hold a click and it will eventually focus.

@jdhiro your hack in issue 2017 worked nicely for the interim

eastbayjake · 2014-05-24T00:25:17Z

I'm also having this same issue with a text input inside an Angular UI Bootstrap modal, and like @project707 I noticed you can get the keyboard to pop up if you do a long tap.

Thanks to everyone for your answers!

eastbayjake · 2014-05-28T17:47:45Z

Just a follow-up: I implemented @jdhiro 's workaround and noticed that dismiss functionality in other modals stopped working. I haven't had time to look into why it's happening, but wanted to let other followers for this issue know.

pedubreuil · 2014-07-04T15:58:27Z

Any update about this issue? Did you find a workaround?

emosenkis · 2014-07-11T01:28:20Z

I'm also experiencing this issue with Chrome on Android. See also angular-ui/bootstrap#2017.

pedubreuil · 2014-07-11T16:40:37Z

Perfect, it works. Thank you :)

jbielick · 2014-09-05T15:03:34Z

The issue mainly boils down to having an <input> or other focusable element inside of an element that has an ng-click directive. Nesting the focusable element inside an element with an ngClick directive casuses this behavior.

The ui-bootstrap modal has an ngClick directive on the content window itself. I couldn't tell you why this is necessary. In the angular-foundation package, which shares almost exactly the same html for the modal template, the ng-click="close($event)" doesn't map to anything at all. It's scope holds no close property or function.

Essentially what's happening here is:
1.) you tap on an input inside of a modal (basically a div with an ng-click directive)
2.) the parent modal window's ngClick directive detects a touchstart event
3.) ngTouch records the coordinates at which the touchstart occurred so that it can clickbust the the resulting click event that will fire afterwards naturally.
4.) touchend fires and ngTouch reconciles the ending point of your touch with where it began and determines that if a click event fires in the same spot, it'll bust it.
5.) a click event fires on the x and y coordinates where you touched (the input) and ngTouch clickbusts this event since it isn't "allowed". Clickbusting involves e.preventDefault(), e.stopPropagation() and event.target.blur() as seen on https://github.com/angular/angular.js/blob/master/src/ngTouch/directive/ngClick.js#L161

Some have found that commenting line 161 will resolve this, but probably precludes other desired functionality that line was intended for. Obviously, modifying an angular package isn't ideal. In my case, we ended up removing the module altogether. This probably can also be alleviated by removing the ng-click directive from the modal window itself. Can anyone comment on why the modal window has an ng-click directive?

See this plunker for a distilled case of this issue. Make sure you "emulate touch screen" from the chrome (or other) dev tools.

This probably fixes this issue which is still unresolved: angular/angular.js#6432 Not sure if this patch breaks something else, but we're using ui-bootstrap modals, and otherwise we wouldn't be able to focus on inputs in such modals.

Form element focus should not be prevented by ng-click. that uses ng-click. Plunker to demonstrate the issue: http://embed.plnkr.co/CxeuWocoPE70vzrevrIi Closes angular#4030, angular#6432

Form element focus should not be prevented by ng-click. The issue was introduced by angular#2989, and happens on mobile browsers that support touch events. Plunker to demonstrate the issue: http://embed.plnkr.co/CxeuWocoPE70vzrevrIi Closes angular#4030, angular#6432

This commit removes the ngClick directive from the ngTouch module. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why this feature has been removed: - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#13287 Closes angular#13558 Closes angular#12392 Closes angular#12153 Closes angular#11358 Closes angular#6432 Closes angular#12867 Closes angular#7231 Closes angular#13213 Closes angular#12082 Closes angular#4030 Closes angular#12545 Closes angular#6001 Closes angular#5307 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#12734 Closes angular#12455 Closes angular#11197 Closes angular#11261 Closes angular#12150 Closes angular#10918 Closes angular#10366 Closes angular#9872 Closes angular#9744 Closes angular#6251 Closes angular#4428 Closes angular#3999 Closes angular#3347 Closes angular#3296 Closes angular#7935 Closes angular#13272 Closes angular#13447 Closes angular#13122 Closes angular#12317 Closes angular#11577 Closes angular#11342 Closes angular#10211 Closes angular#9724 Closes angular#7134 Closes angular#6330 Closes angular#3447 BREAKING CHANGE: The `ngClick` override from the `ngTouch` module has been removed. This means that on touch-based devices, users might experience a 300ms delay before an ngClick event is fired. If you rely on this behavior, consider using [FastClick](https://github.com/ftlabs/fastclick) or [Tappy!](https://github.com/filamentgroup/tappy/). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this article for more info on the topic: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/

This commit removes the ngClick directive from the ngTouch module. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why this feature has been removed: - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module has been removed. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this behavior, consider using [FastClick](https://github.com/ftlabs/fastclick) or [Tappy!](https://github.com/filamentgroup/tappy/). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this article for more info on the topic: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/

…ault This commit deprecates the ngClick directive from the ngTouch module. Additionally, it disables it by default. It can be enabled in the new $touchProvider with $touchProvider.ngClickOverrideEnabled() method. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why the directive is being deprecated. - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this directive, you can still enable it with the `$touchProvider.ngClickOverrideEnabled()`method: ```js angular.module('myApp').config(function($touchProvider) { $touchProvider.ngClickOverrideEnabled(true); }); ``` For migration, we recommend using [FastClick](https://github.com/ftlabs/fastclick). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this [article by Telerik](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) for more info on the topic. Note that this change does not affect the `ngSwipe` directive.

This commit deprecates the ngClick directive from the ngTouch module. Additionally, it disables it by default. It can be enabled in the new $touchProvider with $touchProvider.ngClickOverrideEnabled() method. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why the directive is being deprecated. - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this directive, you can still enable it with the `$touchProvider.ngClickOverrideEnabled()`method: ```js angular.module('myApp').config(function($touchProvider) { $touchProvider.ngClickOverrideEnabled(true); }); ``` For migration, we recommend using [FastClick](https://github.com/ftlabs/fastclick). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this [article by Telerik](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) for more info on the topic. Note that this change does not affect the `ngSwipe` directive.

ashleygwilliams added component: ngTouch labels Feb 28, 2014

IgorMinar added the gh: issue label Mar 6, 2014

jdhiro mentioned this issue Apr 3, 2014

Unable to focus on inputs inside modals on touch devices angular-ui/bootstrap#2017

Closed

Narretz added this to the Ice Box milestone Jul 2, 2014

Narretz added the needs: more info label Jul 2, 2014

btford removed the gh: issue label Aug 20, 2014

numerized mentioned this issue Jan 21, 2015

[Fix Included] Unable to focus on inputs inside modals on touch devices textAngular/textAngular#503

Closed

mikec mentioned this issue Feb 28, 2015

fix(ngTouch): don't blur form elements #11212

Closed

optimacy mentioned this issue Jun 5, 2015

Update angular-touch.js angular/bower-angular-touch#9

Closed

christianvuerings mentioned this issue Jul 10, 2015

fix(ngTouch) Remove ngClick override from ngTouch #12317

Closed

petebacondarwin modified the milestones: Ice Box, ngTouch Overhaul Jan 26, 2016

Narretz mentioned this issue Jan 26, 2016

fix(ngTouch): remove ngClick override #13852

Closed

Narretz mentioned this issue Jan 27, 2016

fix(ngTouch): deprecate ngClick override directive, disable it by def… #13857

Closed

Narretz closed this as completed in 0dfc1df Jan 27, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ngTouch: iOs form elements loose focus when tapped to enter text (textareas,inputs) #6432

ngTouch: iOs form elements loose focus when tapped to enter text (textareas,inputs) #6432

doner-astogdill commented Feb 24, 2014

ashleygwilliams commented Feb 28, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

soncodi commented Apr 13, 2014

project707 commented Apr 21, 2014

eastbayjake commented May 24, 2014

eastbayjake commented May 28, 2014

pedubreuil commented Jul 4, 2014

emosenkis commented Jul 11, 2014

pedubreuil commented Jul 11, 2014

jbielick commented Sep 5, 2014

ngTouch: iOs form elements loose focus when tapped to enter text (textareas,inputs) #6432

ngTouch: iOs form elements loose focus when tapped to enter text (textareas,inputs) #6432

Comments

doner-astogdill commented Feb 24, 2014

ashleygwilliams commented Feb 28, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

jdhiro commented Apr 3, 2014

soncodi commented Apr 13, 2014

project707 commented Apr 21, 2014

eastbayjake commented May 24, 2014

eastbayjake commented May 28, 2014

pedubreuil commented Jul 4, 2014

emosenkis commented Jul 11, 2014

pedubreuil commented Jul 11, 2014

jbielick commented Sep 5, 2014