Permalink
Browse files

Flipswitch: Prevent default when label is clicked

Fixes gh-6661
Closes gh-7942
  • Loading branch information...
gabrielschulhof committed Jan 27, 2015
1 parent 120cae6 commit 7483a6bb8668365fd9f177ef85b9bb2c38389b96
@@ -14,6 +14,8 @@ define( [
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
var selectorEscapeRegex = /([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g;
$.widget( "mobile.flipswitch", $.extend({
options: {
@@ -27,6 +29,8 @@ $.widget( "mobile.flipswitch", $.extend({
},
_create: function() {
var labels;
this.type = this.element[ 0 ].nodeName.toLowerCase();
if ( !this.options.enhanced ) {
@@ -70,6 +74,21 @@ $.widget( "mobile.flipswitch", $.extend({
this._on( {
"change": "refresh"
});
// On iOS we need to prevent default when the label is clicked, otherwise it drops down
// the native select menu. We nevertheless pass the click onto the element like the
// native code would.
if ( this.element[ 0 ].nodeName.toLowerCase() === "select" ) {
labels = this._findLabels();
if ( labels.length ) {
this._on( labels, {
"click": function( event ) {
this.element.click();
event.preventDefault();
}
});
}
}
},
_handleInputFocus: function() {
@@ -168,6 +187,29 @@ $.widget( "mobile.flipswitch", $.extend({
}
},
// Copied with modifications from checkboxradio
_findLabels: function() {
var input = this.element[ 0 ],
labelsList = input.labels;
if ( labelsList && labelsList.length ) {
labelsList = $( labelsList );
} else {
labelsList = this.element.closest( "label" );
if ( labelsList.length === 0 ) {
// NOTE: Windows Phone could not find the label through a selector
// filter works though.
labelsList = $( this.document[ 0 ].getElementsByTagName( "label" ) )
.filter( "[for='" +
input.getAttribute( "id" ).replace( selectorEscapeRegex, "\\$1" ) +
"']" );
}
}
return labelsList;
},
_toggle: function() {
var direction = this.flipswitch.hasClass( "ui-flipswitch-active" ) ? "_left" : "_right";
@@ -33,4 +33,25 @@
testFocusTransfer( $( "#flip-checkbox" ) );
});
asyncTest( "Default is prevented on label click, but click is sent to element", function() {
var eventNs = ".preventDefaultAndPropagateClick",
label = $( "label[for='test-select-label']" ),
select = $( "#test-select-label" );
$.testHelper.detailedEventCascade([
function() {
var event = $.Event( "click" );
label.trigger( event );
deepEqual( event.isDefaultPrevented(), true, "Click-on-label default prevented" );
},
{
click: { src: select, event: "click" + eventNs + "1" }
},
function( result ) {
deepEqual( result.click.timedOut, false, "Select received a click" );
start();
}
]);
});
})( jQuery );
@@ -41,6 +41,11 @@
<option>On</option>
<option>Off</option>
</select>
<label for="test-select-label">Test Select Label</label>
<select id="test-select-label" data-nstest-role="flipswitch">
<option>On</option>
<option>Off</option>
</select>
</div>
</div>
</body>

0 comments on commit 7483a6b

Please sign in to comment.