Fixed keyboard navigation not working in filtered search bar
This commit is contained in:
parent
8a6e415268
commit
14cd8f08ec
|
@ -3,6 +3,7 @@
|
|||
/* global droplab */
|
||||
|
||||
require('../window')(function(w){
|
||||
var whiteListedKeys = [37, 38, 39, 40];
|
||||
w.droplabFilter = {
|
||||
|
||||
keydownWrapper: function(e){
|
||||
|
@ -17,6 +18,10 @@ require('../window')(function(w){
|
|||
return;
|
||||
}
|
||||
|
||||
if (whiteListedKeys.indexOf(e.detail.which) !== -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (config && config.filterFunction && typeof config.filterFunction === 'function') {
|
||||
filterFunction = config.filterFunction;
|
||||
} else {
|
||||
|
@ -57,4 +62,4 @@ module.exports = function(callback) {
|
|||
};
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
});
|
||||
|
|
|
@ -61,13 +61,26 @@
|
|||
}
|
||||
|
||||
checkForEnter(e) {
|
||||
if (e.keyCode === 38 || e.keyCode === 40) {
|
||||
const selectionStart = this.filteredSearchInput.selectionStart;
|
||||
|
||||
e.preventDefault();
|
||||
this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
|
||||
}
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
|
||||
const dropdownEl = dropdown.element;
|
||||
const activeElements = dropdownEl.querySelectorAll('.dropdown-active');
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Prevent droplab from opening dropdown
|
||||
this.dropdownManager.destroyDroplab();
|
||||
if (!activeElements.length) {
|
||||
// Prevent droplab from opening dropdown
|
||||
this.dropdownManager.destroyDroplab();
|
||||
|
||||
this.search();
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -79,6 +79,16 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
%filter-dropdown-item-btn-hover {
|
||||
background-color: $dropdown-hover-color;
|
||||
color: $white-light;
|
||||
text-decoration: none;
|
||||
|
||||
.avatar {
|
||||
border-color: $white-light;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-dropdown-item {
|
||||
.btn {
|
||||
border: none;
|
||||
|
@ -103,13 +113,7 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $dropdown-hover-color;
|
||||
color: $white-light;
|
||||
text-decoration: none;
|
||||
|
||||
.avatar {
|
||||
border-color: $white-light;
|
||||
}
|
||||
@extend %filter-dropdown-item-btn-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -131,6 +135,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.filter-dropdown-item.dropdown-active {
|
||||
.btn {
|
||||
@extend %filter-dropdown-item-btn-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.hint-dropdown {
|
||||
width: 250px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue