[Safari iOS] Select inputs closes on fast tap since issue #226 fix

[laurentgoudet]

The fix for the issue #226 is breaking the select inputs on iOS7 (tested on both iPhone 5 & 5s) for "quick" taps (faster than the 100ms threshold) when the position of the select element on the screen is moved up because the dropdown pops up at the bottom of the screen. If the touchend is not preventDefault(), the element under the initial position of the element (if any) will get the focus, closing the select dropdown.

See video here: http://youtu.be/0J_RNTMzHyQ
Test file: http://pastebin.com/hqs3sDB4

If there are no focusable element under to initial on-screen position of the select input it will work fine, as well as if the select input in near the top of the screen and does not move when the dropdown pops up.

The only fixes I found are:

• Reverting the fix for iOS: Selects don't work with Voiceover #226 , but no more VoiceOver. Apple should fix it anyway
• Exclude selects from fastclick, but then it's super slow

[angi-]

@laurentgoudet I tried your forked version but I still see the same behaviour on selects.

[dcalhoun]

I'm experiencing this issue as well. Would love to see a fix.

[sradu]

+1 having the same issue.

[kenvunz]

thanks @laurentgoudet, your revert fix works for me

[Deliaz]

Have the same:
If select not scrolled to center of the screen, after click it looses focus and the focus goes to next or prev input.

[Deliaz]

This works for me:

$('#my-select').on('touchstart',function(e) {
    e.preventDefault();
});

Tested on Safari and Chrome @ iOS7

[tonvanalebeek]

@Deliaz That fixes the issue in iOS, but prevents selects from being used in Chrome on Android for example. (tested @ Nexus4)

[mgustafsson1]

@laurentgoudet Were you able to find a fix for this? Or did you stick with reverting the mentioned fix?

[dcalhoun]

@mgustafsson1 like @laurentgoudet I rolled back #226 changes on my project and it seems to have resolved the issue for me.

[asselin]

Just submitted a pull request to fix this issue.

[mgustafsson1]

@asselin Nice, thanks!

[avilaton]

@Deliaz I experience the same issue you mention. Have you found a fix or a workaround? I tryed the fixes sent by @asselin but no luck.
Thanks

[Deliaz]

@avilaton
#268 (comment)

[angi-]

@Deliaz That may be a fix for those who use jQuery in their project. I am no so fortunate.

[Deliaz]

@angi- event.preventDefault() is a pure JS way

[asselin]

@avilaton Does @Deliaz 's fix work for you? If so, what was the behavior you saw after applying my fix?

[asselin]

@angi- Ditto for my fix-- no jquery required

[avilaton]

@asselin Yes, it does, under certain adaptations to an angular.js app. needsclick does not catch it, I had not time to see why, but the fix should be right there.

[oldboyxx]

As OP said you can exclude selects from fastclick and then it's fine. I didn't manage to do that with "needsclick" class.

I had to add this to the FastClick.prototype.onTouchStart method in fastclick.js

if (targetElement.nodeName.toLowerCase() == "select") {
    return false;
}

[contactmatts]

@oldboyxx thank you, this resolved my issue. I expanded upon it to include native datepickers in mobile scenarios.

var nodeName = targetElement.nodeName.toLowerCase();
var typeAttribute = targetElement.getAttribute('type');

if (nodeName === "select" || (typeAttribute === 'date' && nodeName === "input") || (typeAttribute === 'datetime' && nodeName === "input")) {
    return false;
}

[chrisk1]

+1 having the same issue. Fixed nicely by solution from @oldboyxx - thank you very much.

[serhiisol]

You can use versolearning@9ac88ef

but return value should be false, as @optikalefx mentioned in that request

[davidnormo]

@contactmatts @oldboyxx Did you put either of your fixes up in a PR?

[oldboyxx]

@davidnormo I did not.

[oliver-moran]

+1 same issue. Made doubly worse it seems when using Angular or dynamicly added selects: the select was totally unselectable unless the user holds down on it for a second or so.

[oliver-moran]

@oldboyxx fix worked for me:

#268 (comment)

Any reason this isn't taken in to the code as a patch (doubt anyone would care about a 300ms delay on selects on iOS)?

[amkoehler]

I'd like to add that the fix provided by @asselin (see pull request here) still is needed in 1.0.6. I added the code from that pull request to my local copy of 1.0.6 and everything is working great.

[eiriksm]

+1 to merging one of the fixes for this issue. Personally I went for the fix from @oldboyxx

[malaniz]

This will be fixed in some version? I'm using this library but is really awful patch every update or new instalation.

[Jokerx3]

As @laurentgoudet mentioned:
Just revert this changes (use "!deviceIsIOS4" in the IF-Statement instead of "!deviceIsIOS") and you will be fine again! =) According to the current version you need to make the changes in the line 584 in fastclick.js .
https://github.com/ftlabs/fastclick/pull/235/files

Or simply use my attached modified version =) .
But pay attention that this breaks VoiceOver again in some way.
fastclick.js.zip

The fix of @oldboyxx didn't work for me as it disabled fastclick.

[Danbardo]

Problem still occurs, @oldboyxx 's fix worked for me, thanks!

[davidpelayo]

This isn't a fastclick issue. It happens in all browsers when RTL and the input is out of the viewport: See this: http://codepen.io/davidpelayo/full/jMjggy/

Tested on latest Firefox, latest Chrome stable and Safari on iOS 10.

[array-addu]

+1 for fix by @oldboyxx

[bradennapier]

so this repo is broken and no plans to fix it i take it thne? this is still a problem years later

[bradennapier]

why would you use something that breaks any input on the page.. .stupid