Framework7: <select> tag is not touchable on latest Chrome for Android

Created on 25 Sep 2016 · 11Comments · Source: framework7io/framework7

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)
Framework7 Version: v1.4.2
Platform and Target: Android, Chrome version 53.0.2785.124 (latest).

What you did

Open Chrome on Android. Navigate to https://framework7.io/. There is big smartphone on the top of the right corner. Touch on Forms -> Form Elements. Touch on "Male" of Gender input field.

Expected Behavior

Selection dialog will be shown with two options: Male and Female

Actual Behavior

Nothing happen

My little investigation

Touch and hold on that select box for about one or two seconds, until it gains the class "focus-state". Then it will be fine after that. However, if you touch other place on screen, then select box will lose it focus, and the problem before will persist once again.

My website is having this problem, as I can see this problem also persist on framework7.io. Therefore, I create this issue.

Bug confirmed High Priority outdated

Source

minhnhut

Most helpful comment

@nolimits4web Do we still need fastclick? The current webkit engine already supports fast clicks natively if right viewort options are set for mobile.

valnub on 5 Oct 2016

👍2

All 11 comments

Cross reported as https://bugs.chromium.org/p/chromium/issues/detail?id=650945.

This is a behavioral change in Chrome which is present in Chrome 53. Dispatching of untrusted events do not perform the default action anymore. So for touchend I expect that you will need to let the touchend perform it's default action and not preventDefault it when the target is a select element.

@RByers so he is aware.

dtapuska on 30 Sep 2016

Hmm, I didn't add any listeners to touchend event or do peventDefault. So is that means the problem is coming from inside of Framework7?

I disabled touch event for select only, by digging into framework7's source code and made some modifications. My HTML is pretty simple, so it worked fine without touch event until now. It was my temporary solution.

Looking forward for official fixes.

minhnhut on 30 Sep 2016

Yes the problem is the usage of fast-clicks.js (https://github.com/nolimits4web/Framework7/blob/a18dd955aa78461336535177845fb1ed0907c05f/src/js/fast-clicks.js#L247)

fast-click library isn't really needed these days.

dtapuska on 30 Sep 2016

@nolimits4web Do we still need fastclick? The current webkit engine already supports fast clicks natively if right viewort options are set for mobile.

valnub on 5 Oct 2016

👍2

I found the same issue in chrome v54 x64 emulator when simulating iPhone. Is there any quick fix for that?

bingzheyuan on 7 Oct 2016

Does anyone have a workaround for this for now? can fast click be removed from the compiled source?

husainfazel on 10 Oct 2016

When I try to exclude the fast-click.js and make a custom build, I find so far that if I click on panel-overlay, the panel is not closed.

bingzheyuan on 11 Oct 2016

any log information?

ZanderBrown on 11 Oct 2016

Fastclick behaves sometimes differently compared to normal native clicks. If it is removed, all click bindings need to be re-tested and maybe bugfixed :-(

valnub on 11 Oct 2016

IIRC FastClick changed years ago to avoid this problem. I believe you could just update to a relatively recent version of FastClick and the problem would likely go away (though that won't necessarily eliminate the need for testing of course, but there should be performance and behavior improvements as well).