Hide the search clear icon in webkit

The search box previously displayed a clear icon on the far right
side in webkit-based browsers, specifically Chrome and Safari. This
hides the clear icon in those browsers, and also fixes a slight
sizing issue, so it should no longer be displayed.

This also disables autocorrect, autocompleted, as well as a few
other automatic search corrections on the field, so mobile devices
should have a better experience.

This closes https://github.com/select2/select2/issues/3018.

dist/css/select2.css

@@ -35,9 +35,12 @@
   .select2-container .select2-search--inline {
     float: left; }
     .select2-container .select2-search--inline .select2-search__field {
+      box-sizing: border-box;
       border: none;
       font-size: 100%;
       margin-top: 5px; }
+      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+        -webkit-appearance: none; }
 
 .select2-dropdown {
   background-color: white;
@@ -85,6 +88,8 @@
     padding: 4px;
     width: 100%;
     box-sizing: border-box; }
+    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+      -webkit-appearance: none; }
   .select2-search--dropdown.select2-search--hide {
     display: none; }
 

dist/js/select2.amd.full.js

@@ -1228,7 +1228,8 @@ define('select2/selection/search',[
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-          ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</li>'
     );
 
@@ -3131,7 +3132,8 @@ define('select2/dropdown/search',[
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</span>'
     );
 

dist/js/select2.amd.js

@@ -1228,7 +1228,8 @@ define('select2/selection/search',[
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-          ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</li>'
     );
 
@@ -3131,7 +3132,8 @@ define('select2/dropdown/search',[
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</span>'
     );
 

dist/js/select2.full.js

@@ -1666,7 +1666,8 @@ define('select2/selection/search',[
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-          ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</li>'
     );
 
@@ -3569,7 +3570,8 @@ define('select2/dropdown/search',[
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</span>'
     );
 

dist/js/select2.js

@@ -1666,7 +1666,8 @@ define('select2/selection/search',[
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-          ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</li>'
     );
 
@@ -3569,7 +3570,8 @@ define('select2/dropdown/search',[
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</span>'
     );
 

src/js/select2/dropdown/search.js

@@ -10,7 +10,8 @@ define([
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</span>'
     );
 

src/js/select2/selection/search.js

@@ -11,7 +11,8 @@ define([
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-          ' role="textbox" />' +
+        ' autocomplete="off" autocorrect="off" autocapitalize="off"' +
+        ' spellcheck="false" role="textbox" />' +
       '</li>'
     );
 

src/scss/_dropdown.scss

@@ -61,6 +61,10 @@
     padding: 4px;
     width: 100%;
     box-sizing: border-box;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
   }
 
   &.select2-search--hide {

src/scss/_multiple.scss

@@ -21,8 +21,13 @@
   float: left;
 
   .select2-search__field {
+    box-sizing: border-box;
     border: none;
     font-size: 100%;
     margin-top: 5px;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
   }
 }

tests/selection/multiple-tests.js

@@ -49,7 +49,7 @@ test('empty update clears the selection', function (assert) {
   assert.equal($rendered.text(), '');
 });
 
-test('escapePlaceholder is being used', function (assert) {
+test('escapeMarkup is being used', function (assert) {
   var selection = new MultipleSelection(
     $('#qunit-fixture .multiple'),
     options

tests/selection/single-tests.js

@@ -65,7 +65,7 @@ test('update renders the data text', function (assert) {
   assert.equal($rendered.text(), 'test');
 });
 
-test('escapePlaceholder is being used', function (assert) {
+test('escapeMarkup is being used', function (assert) {
   var selection = new SingleSelection(
     $('#qunit-fixture .single'),
     options