Textinput: Do not concatenate clearBtnText value into HTML snippet

clearBtnText must be assigned via .attr( "title" ) to the title and via .text()
to the contents of the clear button anchor.

Do not append clear button to textarea elements.

(cherry picked from commit 5197c10)

Closes gh-7604
Fixes gh-7603
Fixes gh-7605

Author: Gabriel Schulhof

js/widgets/forms/clearButton.js

@@ -20,16 +20,21 @@ define( [
 		_create: function() {
 			this._super();
 
-			if ( !!this.options.clearBtn || this.isSearch ) {
+			if ( this.isSearch ) {
+				this.options.clearBtn = true;
+			}
+
+			if ( !!this.options.clearBtn && this.inputNeedsWrap ) {
 				this._addClearBtn();
 			}
 		},
 
 		clearButton: function() {
-
-			return $( "<a href='#' class='ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" +
-    "' title='" + this.options.clearBtnText + "'>" + this.options.clearBtnText + "</a>" );
-
+			return $( "<a href='#' " +
+				"class='ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all'>" +
+				"</a>" )
+					.attr( "title", this.options.clearBtnText )
+					.text( this.options.clearBtnText );
 		},
 
 		_clearBtnClick: function( event ) {

tests/unit/textinput/index.html

@@ -10,6 +10,7 @@
 	<script src="../../../js/jquery.tag.inserter.js"></script>
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../tests/jquery.testHelper.js"></script>
+	<script src="../../../tests/jquery.setNameSpace.js"></script>
 	<script>
 		$.testHelper.asyncLoad([
 			[ "widgets/forms/textinput"],["widgets/forms/clearButton"],["widgets/forms/autogrow" ],
@@ -58,14 +59,17 @@
 
 		<input type="text" id="text-input">
 
-		<input type="text" data-clear-btn="true" id="text-input-clear-btn">
+		<input type="text" data-nstest-clear-btn="true" id="text-input-clear-btn">
 
-		<textarea data-clear-btn="true" id="textarea-clear-btn"></textarea>
+		<textarea data-nstest-clear-btn="true" id="textarea-clear-btn"></textarea>
 
 		<input id="test-clear-btn-option"></input>
 
+		<input id="slider-input" type="number" data-nstest-type="range" min="0" max="93" step="1" value="17" data-nstest-clear-btn="true">
+
 		<input type="text" id="focus-class-test-for-input"></input>
 		<textarea id="focus-class-test-for-textarea"></textarea>
+		<input id="injection-test" data-nstest-clear-btn="true" data-nstest-clear-btn-text="'>a<script>$.clearBtnTextScriptInjected = true;</script>bc</a><a'">
 	</div>
 </body>
 </html>

tests/unit/textinput/textinput_core.js

@@ -104,6 +104,21 @@
 		ok( ! $( "#textarea-clear-btn" ).next().is( "a.ui-input-clear" ), "data-clear-btn does not add clear button to textarea" );
 	});
 
+	test( "data-clear-btn does not add clear button to textarea", function() {
+		deepEqual( $( "#textarea-clear-btn" ).children( "a" ).length, 0,
+			"No anchors have been inserted as children of the data-clear-btn textarea element" );
+	});
+
+	test( "data-clear-btn does not add clear button to slider input", function() {
+		ok( ! $( "#slider-input" ).next().is( "a.ui-input-clear" ),
+			"data-clear-btn does not add clear button to slider input" );
+	});
+
+	test( "data-clear-btn does not add clear button to slider input", function() {
+		deepEqual( $( "#slider-input" ).children( "a" ).length, 0,
+			"No anchors have been inserted as children of the data-clear-btn input element" );
+	});
+
 	test( "data-clear-btn does not add native clear button to input button (IE10)", function() {
 		// Get an input element, initial height, and reserve d for height difference
 		var e = $( "input[data-clear-btn='true']" ),
@@ -149,4 +164,9 @@
 			"turning off clearBtn removes wrapper class 'ui-input-has-clear'" );
 	});
 
+	test( "cannot inject script via clearBtnText option", function() {
+		deepEqual( !!$.clearBtnTextScriptInjected, false,
+			"no script was injected via clearBtnText option" );
+	});
+
 })(jQuery);