Skip to content

Commit

Permalink
Fix #355 and keyboard support, make hovered elements darker.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidstutz
davidstutz committed Aug 1, 2021
1 parent 93974bc commit e7b29fa
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 33 deletions.
14 changes: 11 additions & 3 deletions dist/css/bootstrap-multiselect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,14 @@ span.multiselect-native-select select {
background-color: lightgrey;
color: black;
}
.multiselect-container .multiselect-option:hover,
.multiselect-container .multiselect-group:hover,
.multiselect-container .multiselect-all:hover,
.multiselect-container .multiselect-option:focus,
.multiselect-container .multiselect-group:focus,
.multiselect-container .multiselect-all:focus {
background-color: darkgray !important;
}
.multiselect-container .multiselect-option .form-check,
.multiselect-container .multiselect-group .form-check,
.multiselect-container .multiselect-all .form-check {
Expand All @@ -136,11 +144,11 @@ span.multiselect-native-select select {
padding: 3px 20px 3px 40px;
}
.input-group.input-group-sm > .multiselect-native-select .multiselect {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
padding-right: 1.75rem;
height: calc(1.5em + 0.5rem + 2px);
height: calc(4em);
}
.input-group > .multiselect-native-select {
flex: 1 1 auto;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap-multiselect.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 28 additions & 26 deletions dist/js/bootstrap-multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -798,40 +798,42 @@

//Keyboard support.
this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function (event) {
if ($('input.multiselect-search', this.$container).is(':focus')) {
return;
}
var $items = $(this.$container).find(".multiselect-option:not(.disabled), .multiselect-group:not(.disabled), .multiselect-all").filter(":visible");
var index = $items.index($items.filter(':focus'));
var $search = $('.multiselect-search', this.$container);

// keyCode 9 == Tab
if (event.keyCode === 9 && this.$container.hasClass('show')) {
this.$button.click();
}
else {
var $items = $(this.$container).find(".multiselect-option:not(.disabled), .multiselect-group:not(.disabled), .multiselect-all").filter(":visible");

if (!$items.length) {
return;
}

var index = $items.index($items.filter(':focus'));

// keyCode 13 = Enter
else if (event.keyCode == 13) {
var $current = $items.eq(index);

// keyCode 32 = Space
if (event.keyCode === 32) {
var $checkbox = $current.find('input');

$checkbox.prop("checked", !$checkbox.prop("checked"));
$checkbox.change();

event.preventDefault();
setTimeout(function () {
$current.focus();
}, 1);
}
// keyCode 38 = Arrow Up
else if (event.keyCode == 38) {
if (index == 0 && !$search.is(':focus')) {
setTimeout(function () {
$search.focus();
}, 1);
}

// keyCode 13 = Enter
if (event.keyCode === 13) {
}
// keyCode 40 = Arrow Down
else if (event.keyCode == 40) {
if ($search.is(':focus')) {
var $first = $items.eq(0);
setTimeout(function () {
$search.blur();
$first.focus();
}, 1);
}
else if (index == -1) {
setTimeout(function () {
$current.focus();
}, 0);
$search.focus();
}, 1);
}
}
}, this));
Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap-multiselect.min.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/less/bootstrap-multiselect.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ span.multiselect-native-select select{
color: black;
}

&:hover, &:focus {
background-color: darkgray !important;
}

.form-check {
padding: 0 5px 0 20px;
}
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7030,11 +7030,11 @@ <h2 id="keyboard-support">Keyboard Support</h2>
</tr>
<tr>
<td><code>Enter</code></td>
<td><code>Enter</code> is used to open the dropdown and select options (for selecting options, <code>Space</code> can be used, as well). After a multiselect is in focus, pressing <code>Enter</code> will open the dropdown. Then, the options can be traversed using arrow up and down.</td>
<td><code>Enter</code> is used to open the dropdown and select options (for selecting options, <code>Space</code> can also be used, but will cause the multiselect to lose focus). After a multiselect is in focus, pressing <code>Enter</code> will open the dropdown. Then, the options can be traversed using arrow up and down.</td>
</tr>
<tr>
<td><code>Arrow Up/Arrow Down</code></td>
<td>Used to traverse the options after opening the dropdown. An option can be selected using <code>Space</code> or <code>Enter</code>.</td>
<td>Used to traverse the options after opening the dropdown. An option can be selected using <code>Enter</code>. When <code>enableFiltering</code> is enabled, the search box is treated as the first option, meaning it can be selected by moving up "beyond" the first checkbox.</code></td>
</tr>
</tbody>
</table>
Expand Down

0 comments on commit e7b29fa

Please sign in to comment.