diff options
| -rw-r--r-- | tests/unit/checkboxradio/checkboxradio.html | 12 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/core.js | 37 | ||||
| -rw-r--r-- | tests/unit/checkboxradio/methods.js | 38 | ||||
| -rw-r--r-- | ui/widgets/checkboxradio.js | 21 |
4 files changed, 100 insertions, 8 deletions
diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html index 9883e0834..62552fefc 100644 --- a/tests/unit/checkboxradio/checkboxradio.html +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -64,6 +64,18 @@ <label> <input type="checkbox" id="label-with-no-for"/> </label> +<label> + <input type="checkbox" id="label-with-no-for-with-html"/> + <strong>Hi</strong>, <em>I'm a label</em> +</label> +<label> + <input type="checkbox" id="label-with-no-for-with-text"/> + Hi, I'm a label +</label> +<label> + <input type="checkbox" id="label-with-no-for-with-html-like-text"/> + <em>Hi, I'm a label</em> +</label> <form id="form3"></form> <input type="radio" name="crazy-form" id="crazy-form-1" form="form3" checked="checked"> diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js index 8b0e1de8e..ad27f1be0 100644 --- a/tests/unit/checkboxradio/core.js +++ b/tests/unit/checkboxradio/core.js @@ -131,4 +131,41 @@ QUnit.test( "Calling checkboxradio on an input with no label throws an error", f ); } ); +QUnit.test( "Inheriting label from initial HTML", function( assert ) { + var tests = [ + { + id: "label-with-no-for-with-html", + expectedLabel: "<strong>Hi</strong>, <em>I'm a label</em>" + }, + { + id: "label-with-no-for-with-text", + expectedLabel: "Hi, I'm a label" + }, + { + id: "label-with-no-for-with-html-like-text", + expectedLabel: "<em>Hi, I'm a label</em>" + } + ]; + + assert.expect( tests.length ); + + tests.forEach( function( testData ) { + var id = testData.id; + var expectedLabel = testData.expectedLabel; + var inputElem = $( "#" + id ); + var labelElem = inputElem.parent(); + + inputElem.checkboxradio( { icon: false } ); + + var labelWithoutInput = labelElem.clone(); + labelWithoutInput.find( "input" ).remove(); + + assert.strictEqual( + labelWithoutInput.html().trim(), + expectedLabel.trim(), + "Label correct [" + id + "]" + ); + } ); +} ); + } ); diff --git a/tests/unit/checkboxradio/methods.js b/tests/unit/checkboxradio/methods.js index 09510ec71..f6c94f94f 100644 --- a/tests/unit/checkboxradio/methods.js +++ b/tests/unit/checkboxradio/methods.js @@ -96,4 +96,42 @@ QUnit.test( "Input wrapped in a label preserved on refresh", function( assert ) assert.strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" ); } ); +QUnit.test( "Initial text label not turned to HTML on refresh", function( assert ) { + var tests = [ + { + id: "label-with-no-for-with-html", + expectedLabel: "<strong>Hi</strong>, <em>I'm a label</em>" + }, + { + id: "label-with-no-for-with-text", + expectedLabel: "Hi, I'm a label" + }, + { + id: "label-with-no-for-with-html-like-text", + expectedLabel: "<em>Hi, I'm a label</em>" + } + ]; + + assert.expect( tests.length ); + + tests.forEach( function( testData ) { + var id = testData.id; + var expectedLabel = testData.expectedLabel; + var inputElem = $( "#" + id ); + var labelElem = inputElem.parent(); + + inputElem.checkboxradio( { icon: false } ); + inputElem.checkboxradio( "refresh" ); + + var labelWithoutInput = labelElem.clone(); + labelWithoutInput.find( "input" ).remove(); + + assert.strictEqual( + labelWithoutInput.html().trim(), + expectedLabel.trim(), + "Label correct [" + id + "]" + ); + } ); +} ); + } ); diff --git a/ui/widgets/checkboxradio.js b/ui/widgets/checkboxradio.js index b2537d292..afa4a446d 100644 --- a/ui/widgets/checkboxradio.js +++ b/ui/widgets/checkboxradio.js @@ -50,8 +50,7 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, { }, _getCreateOptions: function() { - var disabled, labels; - var that = this; + var disabled, labels, labelContents; var options = this._super() || {}; // We read the type here, because it makes more sense to throw a element type error first, @@ -71,12 +70,18 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, { // We need to get the label text but this may also need to make sure it does not contain the // input itself. - this.label.contents().not( this.element[ 0 ] ).each( function() { - - // The label contents could be text, html, or a mix. We concat each element to get a - // string representation of the label, without the input as part of it. - that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML; - } ); + // The label contents could be text, html, or a mix. We wrap all elements + // and read the wrapper's `innerHTML` to get a string representation of + // the label, without the input as part of it. + labelContents = this.label.contents().not( this.element[ 0 ] ); + + if ( labelContents.length ) { + this.originalLabel += labelContents + .clone() + .wrapAll( "<div></div>" ) + .parent() + .html(); + } // Set the label option if we found label text if ( this.originalLabel ) { |