Commit ecf08ae1 authored by Phil Hughes's avatar Phil Hughes

Fixed some issues with droplab & keyboard navigation

Added specs
parent 3680612a
...@@ -165,15 +165,21 @@ Object.assign(DropDown.prototype, { ...@@ -165,15 +165,21 @@ Object.assign(DropDown.prototype, {
}, },
show: function() { show: function() {
// debugger if (this.hidden) {
this.list.style.display = 'block'; // debugger
this.hidden = false; this.list.style.display = 'block';
this.currentIndex = 0;
this.hidden = false;
}
}, },
hide: function() { hide: function() {
// debugger if (!this.hidden) {
this.list.style.display = 'none'; // debugger
this.hidden = true; this.list.style.display = 'none';
this.currentIndex = 0;
this.hidden = true;
}
}, },
destroy: function() { destroy: function() {
...@@ -479,6 +485,8 @@ Object.assign(HookInput.prototype, { ...@@ -479,6 +485,8 @@ Object.assign(HookInput.prototype, {
this.input = function input(e) { this.input = function input(e) {
if(self.hasRemovedEvents) return; if(self.hasRemovedEvents) return;
self.list.show();
var inputEvent = new CustomEvent('input.dl', { var inputEvent = new CustomEvent('input.dl', {
detail: { detail: {
hook: self, hook: self,
...@@ -488,7 +496,6 @@ Object.assign(HookInput.prototype, { ...@@ -488,7 +496,6 @@ Object.assign(HookInput.prototype, {
cancelable: true cancelable: true
}); });
e.target.dispatchEvent(inputEvent); e.target.dispatchEvent(inputEvent);
self.list.show();
} }
this.keyup = function keyup(e) { this.keyup = function keyup(e) {
...@@ -504,6 +511,8 @@ Object.assign(HookInput.prototype, { ...@@ -504,6 +511,8 @@ Object.assign(HookInput.prototype, {
} }
function keyEvent(e, keyEventName){ function keyEvent(e, keyEventName){
self.list.show();
var keyEvent = new CustomEvent(keyEventName, { var keyEvent = new CustomEvent(keyEventName, {
detail: { detail: {
hook: self, hook: self,
...@@ -515,7 +524,6 @@ Object.assign(HookInput.prototype, { ...@@ -515,7 +524,6 @@ Object.assign(HookInput.prototype, {
cancelable: true cancelable: true
}); });
e.target.dispatchEvent(keyEvent); e.target.dispatchEvent(keyEvent);
self.list.show();
} }
this.events = this.events || {}; this.events = this.events || {};
...@@ -573,26 +581,43 @@ require('./window')(function(w){ ...@@ -573,26 +581,43 @@ require('./window')(function(w){
module.exports = function(){ module.exports = function(){
var currentKey; var currentKey;
var currentFocus; var currentFocus;
var currentIndex = 0;
var isUpArrow = false; var isUpArrow = false;
var isDownArrow = false; var isDownArrow = false;
var removeHighlight = function removeHighlight(list) { 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++) { 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 setMenuForArrows = function setMenuForArrows(list) {
var listItems = removeHighlight(list); var listItems = removeHighlight(list);
if(currentIndex>0){ if(list.currentIndex>0){
if(!listItems[currentIndex-1]){ if(!listItems[list.currentIndex-1]){
currentIndex = currentIndex-1; list.currentIndex = list.currentIndex-1;
} }
if (listItems[currentIndex-1]) { if (listItems[list.currentIndex-1]) {
listItems[currentIndex-1].classList.add('dropdown-active'); 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){ ...@@ -601,13 +626,13 @@ require('./window')(function(w){
var list = e.detail.hook.list; var list = e.detail.hook.list;
removeHighlight(list); removeHighlight(list);
list.show(); list.show();
currentIndex = 0; list.currentIndex = 0;
isUpArrow = false; isUpArrow = false;
isDownArrow = false; isDownArrow = false;
}; };
var selectItem = function selectItem(list) { var selectItem = function selectItem(list) {
var listItems = removeHighlight(list); var listItems = removeHighlight(list);
var currentItem = listItems[currentIndex-1]; var currentItem = listItems[list.currentIndex-1];
var listEvent = new CustomEvent('click.dl', { var listEvent = new CustomEvent('click.dl', {
detail: { detail: {
list: list, list: list,
...@@ -621,8 +646,8 @@ require('./window')(function(w){ ...@@ -621,8 +646,8 @@ require('./window')(function(w){
var keydown = function keydown(e){ var keydown = function keydown(e){
var typedOn = e.target; var typedOn = e.target;
var dropdown = e.detail.hook.list; var list = e.detail.hook.list;
currentIndex = dropdown.currentIndex; var currentIndex = list.currentIndex;
isUpArrow = false; isUpArrow = false;
isDownArrow = false; isDownArrow = false;
...@@ -654,8 +679,8 @@ require('./window')(function(w){ ...@@ -654,8 +679,8 @@ require('./window')(function(w){
if(isUpArrow){ currentIndex--; } if(isUpArrow){ currentIndex--; }
if(isDownArrow){ currentIndex++; } if(isDownArrow){ currentIndex++; }
if(currentIndex < 0){ currentIndex = 0; } if(currentIndex < 0){ currentIndex = 0; }
list.currentIndex = currentIndex;
setMenuForArrows(e.detail.hook.list); setMenuForArrows(e.detail.hook.list);
dropdown.currentIndex = currentIndex;
}; };
w.addEventListener('mousedown.dl', mousedown); w.addEventListener('mousedown.dl', mousedown);
......
...@@ -93,6 +93,7 @@ require('../window')(function(w){ ...@@ -93,6 +93,7 @@ require('../window')(function(w){
self.hook.list.setData.call(self.hook.list, data); self.hook.list.setData.call(self.hook.list, data);
} }
self.notLoading(); self.notLoading();
self.hook.list.currentIndex = 0;
}); });
}, },
...@@ -142,4 +143,4 @@ module.exports = function(callback) { ...@@ -142,4 +143,4 @@ module.exports = function(callback) {
}; };
},{}]},{},[1])(1) },{}]},{},[1])(1)
}); });
\ No newline at end of file
...@@ -36,6 +36,7 @@ require('../window')(function(w){ ...@@ -36,6 +36,7 @@ require('../window')(function(w){
return filterFunction(o, value); return filterFunction(o, value);
}); });
list.render(matches); list.render(matches);
list.currentIndex = 0;
}, },
init: function init(hookInput) { init: function init(hookInput) {
......
...@@ -40,6 +40,16 @@ describe 'Dropdown label', js: true, feature: true do ...@@ -40,6 +40,16 @@ describe 'Dropdown label', js: true, feature: true do
visit namespace_project_issues_path(project.namespace, project) visit namespace_project_issues_path(project.namespace, project)
end 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 describe 'behavior' do
it 'opens when the search bar has label:' do it 'opens when the search bar has label:' do
filtered_search.set('label:') filtered_search.set('label:')
......
...@@ -20,6 +20,22 @@ describe 'Search bar', js: true, feature: true do ...@@ -20,6 +20,22 @@ describe 'Search bar', js: true, feature: true do
left_style.to_s.gsub('left: ', '').to_f left_style.to_s.gsub('left: ', '').to_f
end 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 describe 'clear search button' do
it 'clears text' do it 'clears text' do
search_text = 'search_text' search_text = 'search_text'
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment