Skip to content

Commit

Permalink
Further optimize arrow navigation.
Browse files Browse the repository at this point in the history 
Close snapappointments#1008. Close snapappointments#830.
  • Loading branch information
@caseyjhol @avantika-gupta-jtg
caseyjhol authored and avantika-gupta-jtg committed May 14, 2020
1 parent 8dcaf7e commit 012f3e5
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 31 deletions.
29 changes: 15 additions & 14 deletions dist/js/bootstrap-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,10 +345,10 @@
var actionsbox = this.multiple && this.options.actionsBox ?
'<div class="bs-actionsbox">' +
'<div class="btn-group btn-group-sm btn-block">' +
'<button class="actions-btn bs-select-all btn btn-default">' +
'<button type="button" class="actions-btn bs-select-all btn btn-default">' +
this.options.selectAllText +
'</button>' +
'<button class="actions-btn bs-deselect-all btn btn-default">' +
'<button type="button" class="actions-btn bs-deselect-all btn btn-default">' +
this.options.deselectAllText +
'</button>' +
'</div>' +
Expand All @@ -357,7 +357,7 @@
var donebutton = this.multiple && this.options.doneButton ?
'<div class="bs-donebutton">' +
'<div class="btn-group btn-block">' +
'<button class="btn btn-sm btn-default">' +
'<button type="button" class="btn btn-sm btn-default">' +
this.options.doneButtonText +
'</button>' +
'</div>' +
Expand Down Expand Up @@ -1132,6 +1132,7 @@
nextPrev,
prevIndex,
isActive,
selector = ':not(.disabled, .hidden, .dropdown-header, .divider)',
keyCodeMap = {
32: ' ',
48: '0',
Expand Down Expand Up @@ -1209,7 +1210,7 @@
that.$button.focus();
}
// $items contains li elements when liveSearch is enabled
$items = $('[role=menu] li:not(.divider):not(.dropdown-header):visible', $parent);
$items = $('[role=menu] li:not(.disabled, .hidden, .dropdown-header, .divider)', $parent);
if (!$this.val() && !/(38|40)/.test(e.keyCode.toString(10))) {
if ($items.filter('.active').length === 0) {
$items = that.$newElement.find('li');
Expand All @@ -1226,11 +1227,11 @@

if (/(38|40)/.test(e.keyCode.toString(10))) {
index = $items.index($items.filter(':focus'));
first = $items.parent(':not(.disabled):visible').first().index();
last = $items.parent(':not(.disabled):visible').last().index();
next = $items.eq(index).parent().nextAll(':not(.disabled):visible').eq(0).index();
prev = $items.eq(index).parent().prevAll(':not(.disabled):visible').eq(0).index();
nextPrev = $items.eq(next).parent().prevAll(':not(.disabled):visible').eq(0).index();
first = $items.parent(selector).first().data('originalIndex');
last = $items.parent(selector).last().data('originalIndex');
next = $items.eq(index).parent().nextAll(selector).eq(0).data('originalIndex');
prev = $items.eq(index).parent().prevAll(selector).eq(0).data('originalIndex');
nextPrev = $items.eq(next).parent().prevAll(selector).eq(0).data('originalIndex');

if (that.options.liveSearch) {
$items.each(function (i) {
Expand All @@ -1239,11 +1240,11 @@
}
});
index = $items.index($items.filter('.active'));
first = $items.filter(':not(.disabled):visible').first().data('index');
last = $items.filter(':not(.disabled):visible').last().data('index');
next = $items.eq(index).nextAll(':not(.disabled):visible').eq(0).data('index');
prev = $items.eq(index).prevAll(':not(.disabled):visible').eq(0).data('index');
nextPrev = $items.eq(next).prevAll(':not(.disabled):visible').eq(0).data('index');
first = $items.first().data('index');
last = $items.last().data('index');
next = $items.eq(index).nextAll().eq(0).data('index');
prev = $items.eq(index).prevAll().eq(0).data('index');
nextPrev = $items.eq(next).prevAll().eq(0).data('index');
}

prevIndex = $this.data('prevIndex');
Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap-select.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/bootstrap-select.min.js
View file

Large diffs are not rendered by default.

23 changes: 12 additions & 11 deletions js/bootstrap-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1126,6 +1126,7 @@
nextPrev,
prevIndex,
isActive,
selector = ':not(.disabled, .hidden, .dropdown-header, .divider)',
keyCodeMap = {
32: ' ',
48: '0',
Expand Down Expand Up @@ -1203,7 +1204,7 @@
that.$button.focus();
}
// $items contains li elements when liveSearch is enabled
$items = $('[role=menu] li:not(.divider):not(.dropdown-header):visible', $parent);
$items = $('[role=menu] li:not(.disabled, .hidden, .dropdown-header, .divider)', $parent);
if (!$this.val() && !/(38|40)/.test(e.keyCode.toString(10))) {
if ($items.filter('.active').length === 0) {
$items = that.$newElement.find('li');
Expand All @@ -1220,11 +1221,11 @@

if (/(38|40)/.test(e.keyCode.toString(10))) {
index = $items.index($items.filter(':focus'));
first = $items.parent(':not(.disabled):visible').first().index();
last = $items.parent(':not(.disabled):visible').last().index();
next = $items.eq(index).parent().nextAll(':not(.disabled):visible').eq(0).index();
prev = $items.eq(index).parent().prevAll(':not(.disabled):visible').eq(0).index();
nextPrev = $items.eq(next).parent().prevAll(':not(.disabled):visible').eq(0).index();
first = $items.parent(selector).first().data('originalIndex');
last = $items.parent(selector).last().data('originalIndex');
next = $items.eq(index).parent().nextAll(selector).eq(0).data('originalIndex');
prev = $items.eq(index).parent().prevAll(selector).eq(0).data('originalIndex');
nextPrev = $items.eq(next).parent().prevAll(selector).eq(0).data('originalIndex');

if (that.options.liveSearch) {
$items.each(function (i) {
Expand All @@ -1233,11 +1234,11 @@
}
});
index = $items.index($items.filter('.active'));
first = $items.filter(':not(.disabled):visible').first().data('index');
last = $items.filter(':not(.disabled):visible').last().data('index');
next = $items.eq(index).nextAll(':not(.disabled):visible').eq(0).data('index');
prev = $items.eq(index).prevAll(':not(.disabled):visible').eq(0).data('index');
nextPrev = $items.eq(next).prevAll(':not(.disabled):visible').eq(0).data('index');
first = $items.first().data('index');
last = $items.last().data('index');
next = $items.eq(index).nextAll().eq(0).data('index');
prev = $items.eq(index).prevAll().eq(0).data('index');
nextPrev = $items.eq(next).prevAll().eq(0).data('index');
}

prevIndex = $this.data('prevIndex');
Expand Down
29 changes: 25 additions & 4 deletions test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
</head>
Expand All @@ -30,7 +30,28 @@
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="basic" class="col-lg-2 control-label">"Basic"</label>
<label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch disabled)</label>

<div class="col-lg-10">
<select id="basic" class="selectpicker show-tick form-control">
<option>cow</option>
<option data-subtext="option subtext">bull</option>
<option class="get-class" disabled>ox</option>
<optgroup label="test" data-subtext="optgroup subtext">
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</optgroup>
</select>
</div>
</div>
</form>

<hr>

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch enabled)</label>

<div class="col-lg-10">
<select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
Expand All @@ -50,7 +71,7 @@
<hr>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="basic2" class="col-lg-2 control-label">"Basic" #2 (multiple, max-option=1)</label>
<label for="basic2" class="col-lg-2 control-label">"Basic" (multiple, maxOptions=1)</label>

<div class="col-lg-10">
<select id="basic2" class="show-tick form-control" multiple>
Expand All @@ -70,7 +91,7 @@
<hr>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, max-option=2</label>
<label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label>

<div class="col-lg-10">
<select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple data-max-options="2">
Expand Down

0 comments on commit 012f3e5

Please sign in to comment.