iOS input bug - input fields

[Salan]

I've built an application for iOS which implements fastclick. But the app becomes buggy when there are multiple input fields displayed at the same time and the user taps on one of them. E.g: I've a registration form with a few input fields (name, email etc). Tapping a field shifts focus to the wrong input field which quickly becomes very frustating. The keyboard appears at the same time. This generally happens the first time I started googling this issue and found a pretty fresh thread which unfortunately got locked:

https://github.com/ftlabs/fastclick/issues/17

You say that you cant reproduce the error but I can. Just open http://jsfiddle.net/agH7R/5/ (which was posted in the former thread) and first press "this is link" and then the input field about. The keyboard shows up but focus is moved up towards the CSS code, it doesnt focus on the input field.

So to sum it up: there is some issues with fastclick ability to determine which input field is clicked, there seem to be problems with setting focus and moving the view to the correct element. Am I the only one who can reproduce this? I've tested it on an iPhone 4 with iOS 5.1.1 and an iPhone 5 with iOS 6.

Do you have any idea how I can troubleshoot this issue?

[mattcg]

I couldn't replicate the issue you describe. This is what I did:

1. tap the link
2. tap the input field

which causes the input field to gain focus, bringing up the keyboard. I can then type into the field normally. I tried this in Safari on both iOS 5.1 and iOS 6.0.

[Salan]

First: thanks for your fast reply. Secondly: that's really odd! I downloaded display recorder and recorded a short video showing the issues.

Here is what I do in the video:

1. I tap the input field, the keyboard pops up then disappear just as quickly (this happens sometimes)
2. I tap the link twice (no particular reason for doing it twice)
3. I tap the input field, the keyboard shows but the view is set to the CSS code

The video: http://www.youtube.com/watch?v=3zXfmmlT794&feature=plcp Recorded on iPhone 4, 5.1.1

[mattcg]

Thanks for recording the test, I appreciate the effort. I tried those exact same steps but I still couldn't replicate. It just behaves normally. Are you sure you don't have a really old cached version of FastClick? This sounds like the kind of bug people were reporting back when FastClick used createElementFromPoint. We stopped using that and now we use event.target, which is much more reliable.

[Salan]

I don't think it has anything todo with the cache. I downloaded the latest fastclick.js, uploaded it to my server, I deleted cookies and data on my iPhone, killed safari and then retried. The issues remains :(. Do you have any other ideas? If I could catch all functionality that regards input fields then I might be able to troubleshoot it by myself. Can you give me any hint for where to start in the js file?

[mattcg]

The key point to add a breakpoint is the first line inside FastClick.prototype.onTouchEnd. That method is where most of the decision logic happens.

[mattcg]

I suggest running a reduced test case in a plain HTML file outside the jsFiddle interface. There are some test cases in tests/ that you can follow as an example. Please feel free to contribute yours :)

[addexm]

I'm having exactly the same issue, fyi. I'm actually somewhat relieved to know it's not just us. Basic gist is that occasionally when clicking a select box, a different form field than the one clicked will be focused. We're using jquery mobile 1.2, and I was initially suspecting it.

[mattcg]

Thanks for reporting @addexm. Are you able to provide a reduced test case? Am I right in saying that the issue is not reproducible 100% of the time?

[addexm]

No problem! Yeah, I can reproduce it in the iOS simulator with the following: https://gist.github.com/4149662 Click around a lot. It doesn't happen the first time.

[mattcg]

Thanks for that. I managed to replicate the issue where the 'Time of Day' selector would focus if I clicked on the 'Physician' selector, however after removing the needsclick classes I was unable to reproduce that. Just so we can reduce this as much as possible, will you try the test without the needsclick class please?

[addexm]

No problem. I am still able to reproduce the error after removing needsclick. (new gist, JIC: https://gist.github.com/4156138) My exact actions are 1) refresh page in simulator, 2) click the down arrow of the date selector (at which point the chooser opens from the bottom of the page, sliding the content up), 3) without moving the mouse, click the 'time of day' selector. What I'm seeing is the picker briefly changing to the time of day options list then immediately closing. I have reproduced this on two machines and the behavior is consistent.

[mattcg]

Thanks for the steps. What version of iOS are you testing?

[jeybe]

I'm having the same issue. Got it to work somewhat better (almost flawlessly) by adding event.stopImmediatePropagation(); right inside FastClick.prototype.onTouchEnd = function(event) { but not perfectly unfortunately.

Other wierd stuff happens too when this plugin is included, things like double execution of functions, clicks on buttons get triggered even though I'm tapping elsewhere, etc. May root to the same problem. Any ideas?

I'm using ios 6.0.1 with the iPhone 5

[mattcg]

@jeybe I've only seen double execution of callbacks in cases like issue #23. Are you using alerts or any other kind of modal dialog? The root cause of #23 is a bug in Safari itself, but I'm still looking for a workaround.

Have you instantiated FastClick more than once on the same element? The fact that event.stopImmediatePropagation prevents the double clicks you're experiencing makes me wonder whether your issue might be #26.

[addexm]

I'm also using 6.0.1 in the simulator and on an iPhone 4S.

[jeybe]

alerts yes, instantiated only once. It seems now as if stopeImmediatePropagation didn't do the job after all. The most annoying part about this is the randomness of when this occurs. Now, all of a sudden, it seems to be happening once per site load and then not again. But as I said, this appears excruciatingly random..

Could this have something to do with iScroll? Do you have iScroll included @addexm? Since, this (at least for me) doesn't happen on a plane html doc with only this plugin included, I've tried to isolate the other piece of code that together with fastClick causes this bug. I've eliminated a few plugins as not the interfering one but for technical reasons, I've not been able to try without iScroll (throws lots of errors in the console once excluded.) So iScroll may be the second culprit here.

Please look in to this in more detail whenever possible. I've removed this plugin on request from my users for the time being.

[BrandonLive]

I'm hitting this same issue with FastClick 1.0.6 on iOS 8.4.1. We have four select controls stacked vertically. If you tap the third one, the page is moved up by the OS select control, and then focus jumps unexpectedly to the 4th select control. If you tap the 4th one, the spinner comes up and then immediately disappears as a click is registered outside the select control.

[bnek]

Has anyone yet found a suitable workaround for this problem?

[powermikee]

Had the same issue. Only way I found to solve it was to put the "needsclick" class on each input in that form.

[Taxel]

I am having the very same problem on iOS with input type="range". I applied the "needsclick" class but that did not help. Any ideas how I can get it to work? @powermikee did you encounter "range" and successfully fix it?