Fixed some issues with droplab & keyboard navigation
Added specs
This commit is contained in:
parent
3680612a5f
commit
ecf08ae1e6
5 changed files with 76 additions and 23 deletions
|
@ -165,15 +165,21 @@ Object.assign(DropDown.prototype, {
|
|||
},
|
||||
|
||||
show: function() {
|
||||
// debugger
|
||||
this.list.style.display = 'block';
|
||||
this.hidden = false;
|
||||
if (this.hidden) {
|
||||
// debugger
|
||||
this.list.style.display = 'block';
|
||||
this.currentIndex = 0;
|
||||
this.hidden = false;
|
||||
}
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
// debugger
|
||||
this.list.style.display = 'none';
|
||||
this.hidden = true;
|
||||
if (!this.hidden) {
|
||||
// debugger
|
||||
this.list.style.display = 'none';
|
||||
this.currentIndex = 0;
|
||||
this.hidden = true;
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
|
@ -479,6 +485,8 @@ Object.assign(HookInput.prototype, {
|
|||
this.input = function input(e) {
|
||||
if(self.hasRemovedEvents) return;
|
||||
|
||||
self.list.show();
|
||||
|
||||
var inputEvent = new CustomEvent('input.dl', {
|
||||
detail: {
|
||||
hook: self,
|
||||
|
@ -488,7 +496,6 @@ Object.assign(HookInput.prototype, {
|
|||
cancelable: true
|
||||
});
|
||||
e.target.dispatchEvent(inputEvent);
|
||||
self.list.show();
|
||||
}
|
||||
|
||||
this.keyup = function keyup(e) {
|
||||
|
@ -504,6 +511,8 @@ Object.assign(HookInput.prototype, {
|
|||
}
|
||||
|
||||
function keyEvent(e, keyEventName){
|
||||
self.list.show();
|
||||
|
||||
var keyEvent = new CustomEvent(keyEventName, {
|
||||
detail: {
|
||||
hook: self,
|
||||
|
@ -515,7 +524,6 @@ Object.assign(HookInput.prototype, {
|
|||
cancelable: true
|
||||
});
|
||||
e.target.dispatchEvent(keyEvent);
|
||||
self.list.show();
|
||||
}
|
||||
|
||||
this.events = this.events || {};
|
||||
|
@ -573,26 +581,43 @@ require('./window')(function(w){
|
|||
module.exports = function(){
|
||||
var currentKey;
|
||||
var currentFocus;
|
||||
var currentIndex = 0;
|
||||
var isUpArrow = false;
|
||||
var isDownArrow = false;
|
||||
var removeHighlight = function removeHighlight(list) {
|
||||
var listItems = list.list.querySelectorAll('li:not(.divider)');
|
||||
var listItems = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
|
||||
var listItemsTmp = [];
|
||||
for(var i = 0; i < listItems.length; i++) {
|
||||
listItems[i].classList.remove('dropdown-active');
|
||||
var listItem = listItems[i];
|
||||
listItem.classList.remove('dropdown-active');
|
||||
|
||||
if (listItem.style.display !== 'none') {
|
||||
listItemsTmp.push(listItem);
|
||||
}
|
||||
}
|
||||
return listItems;
|
||||
return listItemsTmp;
|
||||
};
|
||||
|
||||
var setMenuForArrows = function setMenuForArrows(list) {
|
||||
var listItems = removeHighlight(list);
|
||||
if(currentIndex>0){
|
||||
if(!listItems[currentIndex-1]){
|
||||
currentIndex = currentIndex-1;
|
||||
if(list.currentIndex>0){
|
||||
if(!listItems[list.currentIndex-1]){
|
||||
list.currentIndex = list.currentIndex-1;
|
||||
}
|
||||
|
||||
if (listItems[currentIndex-1]) {
|
||||
listItems[currentIndex-1].classList.add('dropdown-active');
|
||||
if (listItems[list.currentIndex-1]) {
|
||||
var el = listItems[list.currentIndex-1];
|
||||
var filterDropdownEl = el.closest('.filter-dropdown');
|
||||
el.classList.add('dropdown-active');
|
||||
|
||||
if (filterDropdownEl) {
|
||||
var filterDropdownBottom = filterDropdownEl.offsetHeight;
|
||||
var elOffsetTop = el.offsetTop - 30;
|
||||
|
||||
if (elOffsetTop > filterDropdownBottom) {
|
||||
filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
|
||||
console.log(filterDropdownEl.scrollTop);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -601,13 +626,13 @@ require('./window')(function(w){
|
|||
var list = e.detail.hook.list;
|
||||
removeHighlight(list);
|
||||
list.show();
|
||||
currentIndex = 0;
|
||||
list.currentIndex = 0;
|
||||
isUpArrow = false;
|
||||
isDownArrow = false;
|
||||
};
|
||||
var selectItem = function selectItem(list) {
|
||||
var listItems = removeHighlight(list);
|
||||
var currentItem = listItems[currentIndex-1];
|
||||
var currentItem = listItems[list.currentIndex-1];
|
||||
var listEvent = new CustomEvent('click.dl', {
|
||||
detail: {
|
||||
list: list,
|
||||
|
@ -621,8 +646,8 @@ require('./window')(function(w){
|
|||
|
||||
var keydown = function keydown(e){
|
||||
var typedOn = e.target;
|
||||
var dropdown = e.detail.hook.list;
|
||||
currentIndex = dropdown.currentIndex;
|
||||
var list = e.detail.hook.list;
|
||||
var currentIndex = list.currentIndex;
|
||||
isUpArrow = false;
|
||||
isDownArrow = false;
|
||||
|
||||
|
@ -654,8 +679,8 @@ require('./window')(function(w){
|
|||
if(isUpArrow){ currentIndex--; }
|
||||
if(isDownArrow){ currentIndex++; }
|
||||
if(currentIndex < 0){ currentIndex = 0; }
|
||||
list.currentIndex = currentIndex;
|
||||
setMenuForArrows(e.detail.hook.list);
|
||||
dropdown.currentIndex = currentIndex;
|
||||
};
|
||||
|
||||
w.addEventListener('mousedown.dl', mousedown);
|
||||
|
|
|
@ -93,6 +93,7 @@ require('../window')(function(w){
|
|||
self.hook.list.setData.call(self.hook.list, data);
|
||||
}
|
||||
self.notLoading();
|
||||
self.hook.list.currentIndex = 0;
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -142,4 +143,4 @@ module.exports = function(callback) {
|
|||
};
|
||||
|
||||
},{}]},{},[1])(1)
|
||||
});
|
||||
});
|
||||
|
|
|
@ -36,6 +36,7 @@ require('../window')(function(w){
|
|||
return filterFunction(o, value);
|
||||
});
|
||||
list.render(matches);
|
||||
list.currentIndex = 0;
|
||||
},
|
||||
|
||||
init: function init(hookInput) {
|
||||
|
|
|
@ -40,6 +40,16 @@ describe 'Dropdown label', js: true, feature: true do
|
|||
visit namespace_project_issues_path(project.namespace, project)
|
||||
end
|
||||
|
||||
describe 'keyboard navigation' do
|
||||
it 'selects label' do
|
||||
send_keys_to_filtered_search('label:')
|
||||
|
||||
filtered_search.native.send_keys(:down, :down, :enter)
|
||||
|
||||
expect(filtered_search.value).to eq("label:~#{special_label.name}")
|
||||
end
|
||||
end
|
||||
|
||||
describe 'behavior' do
|
||||
it 'opens when the search bar has label:' do
|
||||
filtered_search.set('label:')
|
||||
|
|
|
@ -20,6 +20,22 @@ describe 'Search bar', js: true, feature: true do
|
|||
left_style.to_s.gsub('left: ', '').to_f
|
||||
end
|
||||
|
||||
describe 'keyboard navigation' do
|
||||
it 'makes item active' do
|
||||
filtered_search.native.send_keys(:down)
|
||||
|
||||
page.within '#js-dropdown-hint' do
|
||||
expect(page).to have_selector('.dropdown-active')
|
||||
end
|
||||
end
|
||||
|
||||
it 'selects item' do
|
||||
filtered_search.native.send_keys(:down, :down, :enter)
|
||||
|
||||
expect(filtered_search.value).to eq('author:')
|
||||
end
|
||||
end
|
||||
|
||||
describe 'clear search button' do
|
||||
it 'clears text' do
|
||||
search_text = 'search_text'
|
||||
|
|
Loading…
Reference in a new issue