Forms: hide the native clear button on IE 10 when JQM clear button is visible on text inputs. Fixes #5756 - Textinput in IE10 has a default clear icon

Author: RedWolves

css/structure/jquery.mobile.forms.textinput.css

@@ -26,6 +26,9 @@ input::-moz-placeholder, textarea::-moz-placeholder { color: #aaa; }
 /* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
 input[type=number]::-webkit-outer-spin-button { margin: 0; }
 
+/* Resolves issue #5756: Textinput in IE10 has a default clear icon */
+input[data-clear-btn=true]::-ms-clear { display: none; }
+
 @media all and (min-width: 28em){
 	.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
 	.ui-field-contain input.ui-input-text,

tests/unit/textinput/textinput_core.js

@@ -89,5 +89,26 @@
 	test( "data-clear-btn does not add clear button to textarea", function() {
 		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 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']" ),
+				h = e.height(), d;
+
+		e.addClass("msClear");
+		e.val("some text").focus();e.val("some text").focus();
+		// Avoid syntax errors
+		try {
+			document.styleSheets[0].addRule(".msClear::-ms-clear", "height: 100px");
+		} catch (o) {
+			ok( true, "browser does not have the native feature for a test");
+			return true;
+		}
+
+		// If the pseudo-element exists, our height should be much larger
+		d = e.height() > h;
+
+		ok( !d, "native clear button is still visible" + d );
+	});
+
 })(jQuery);