1.4.0 Beta 1: Tapping associated label for select with data-role="flipswitch" on iOS opens select wheel #6661

Closed
burdeasa opened this Issue Oct 25, 2013 · 5 comments

Projects

None yet

4 participants

@burdeasa

With jQuery Mobile 1.4.0 Beta 1 running on iOS 6.1.3 or iOS 7.0.3, use the new flipswitch widget by defining a select with a data-role of "flipswitch". Also, include an associated label.

If you tap directly on the switch, the switch toggles as expected. If you tap on the associated label, the switch toggles, but iOS also opens the select "wheel" with choices of "On" and "Off", as usually occurs with a native select.

As a test page, see the demo page at:
http://view.jquerymobile.com/1.4.0-beta.1/demos/flipswitch/
Be sure to try the demo entitled "Basic select switch" (the third demo on the page).

Note: This problem does not occur when using input type="checkbox" instead of select.

@agcolom
Member
agcolom commented Oct 25, 2013

I am not experiencing this on my iPhone 4S, iOS 7.0.2 with this demo page for both RC1 and beta1.
@burdeasa On which device are you seeing this behavior?

@burdeasa

I am seeing it on an 4th Gen iPod Touch running iOS 6.1.3 and on an iPhone 5 running iOS 7.0.3.

Just to make sure we are talking about the same thing: it must be the select demo, not the input checkbox demo, and you must tap on the label text ("Flip toggle switch select:"), not on the switch itself to see the behavior.

@jaspermdegroot
Member

I can reproduce the issue. Sometimes not only the native select control is shown, but I also briefly get to see the keyboard. Let's see if we can prevent this.

@gabrielschulhof
Contributor

This is still valid in iOS 6.1.2 with the latest code.

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Jan 26, 2015
@gabrielschulhof gabrielschulhof self-assigned this Jan 26, 2015
@gabrielschulhof
Contributor

Egads! Looks terrible on iOS 7 (iPhone 5S), at least with BrowserStack: https://www.youtube.com/watch?v=O9E_zDlnaOM

@kakul kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015
@gabrielschulhof @kakul gabrielschulhof + kakul Flipswitch: Prevent default when label is clicked
Fixes gh-6661
Closes gh-7942
012989b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment