1
0
mirror of synced 2025-02-03 21:59:24 +03:00

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.
This commit is contained in:
Kevin Brown 2015-02-09 15:29:28 -05:00
parent b1c016584b
commit 4dda5e7a74
14 changed files with 41 additions and 17 deletions

View File

@ -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; }

File diff suppressed because one or more lines are too long

View File

@ -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>'
);

View File

@ -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>'
);

View File

@ -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>'
);

File diff suppressed because one or more lines are too long

6
dist/js/select2.js vendored
View File

@ -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>'
);

File diff suppressed because one or more lines are too long

View File

@ -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>'
);

View File

@ -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>'
);

View File

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

View File

@ -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;
}
}
}

View File

@ -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

View File

@ -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