Skip to content

Commit

Permalink
Merge pull request #58 from giltza/master
Browse files Browse the repository at this point in the history 
Fixing #57 Moving focus to next item (in paper-menu) does not skip disabled items.
  • Loading branch information
@bicknellr
bicknellr committed Apr 18, 2016
2 parents 3e3cc22 + eb6ff5f commit 57ebc50
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 8 deletions.
31 changes: 23 additions & 8 deletions iron-menu-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@
var attr = this.attrForItemTitle || 'textContent';
var title = item[attr] || item.getAttribute(attr);

if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
if (!item.hasAttribute('disabled') && title &&
title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
this._setFocusedItem(item);
break;
}
Expand All @@ -137,21 +138,34 @@

/**
* Focuses the previous item (relative to the currently focused item) in the
* menu.
* menu, disabled items will be skipped.
*/
_focusPrevious: function() {
var length = this.items.length;
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
this._setFocusedItem(this.items[index]);
var curFocusIndex = Number(this.indexOf(this.focusedItem));
for (var i = 1; i < length; i++) {
var item = this.items[(curFocusIndex - i + length) % length];
if (!item.hasAttribute('disabled')) {
this._setFocusedItem(item);
return;
}
}
},

/**
* Focuses the next item (relative to the currently focused item) in the
* menu.
* menu, disabled items will be skipped.
*/
_focusNext: function() {
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
this._setFocusedItem(this.items[index]);
var length = this.items.length;
var curFocusIndex = Number(this.indexOf(this.focusedItem));
for (var i = 1; i < length; i++) {
var item = this.items[(curFocusIndex + i) % length];
if (!item.hasAttribute('disabled')) {
this._setFocusedItem(item);
return;
}
}
},

/**
Expand Down Expand Up @@ -260,7 +274,8 @@
if (selectedItem) {
this._setFocusedItem(selectedItem);
} else if (this.items[0]) {
this._setFocusedItem(this.items[0]);
// We find the first none-disabled item (if one exists)
this._focusNext();
}
});
},
Expand Down
169 changes: 169 additions & 0 deletions test/iron-menu-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,25 @@
</template>
</test-fixture>

<test-fixture id="disabled">
<template>
<test-menu>
<div>a item 1</div>
<div disabled>b item 2</div>
<div>b item 3</div>
<div disabled>c item 4</div>
</test-menu>
</template>
</test-fixture>

<test-fixture id="only-disabled">
<template>
<test-menu>
<div disabled>disabled item</div>
</test-menu>
</template>
</test-fixture>

<test-fixture id="multi">
<template>
<test-menu multi>
Expand Down Expand Up @@ -94,6 +113,156 @@
});
});

test('focusing on next item skips disabled items', function(done) {
var menu = fixture('disabled');
MockInteractions.focus(menu);
// Wait for async focus
Polymer.Base.async(function() {
// Key press down
MockInteractions.keyDownOn(menu, 40);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, menu.items[2], 'menu.items[2] is focused');
done();
});
});
});

test('focusing on next item in empty menu', function(done) {
var menu = fixture('empty');
MockInteractions.focus(menu);
// Wait for async focus
Polymer.Base.async(function() {
// Key press down
MockInteractions.keyDownOn(menu, 40);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, undefined, 'no focused item');
done();
});
});
});

test('focusing on next item in all disabled menu', function(done) {
var menu = fixture('only-disabled');
MockInteractions.focus(menu);
// Wait for async focus
Polymer.Base.async(function() {
// Key press down
MockInteractions.keyDownOn(menu, 40);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, undefined, 'no focused item');
done();
});
});
});

test('focusing on previous item skips disabled items', function(done) {
var menu = fixture('disabled');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press up
MockInteractions.keyDownOn(menu, 38);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, menu.items[2], 'menu.items[2] is focused');
done();
});
});
});

test('focusing on previous item in empty menu', function(done) {
var menu = fixture('empty');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press up
MockInteractions.keyDownOn(menu, 38);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, undefined, 'no focused item');
done();
});
});
});

test('focusing on previous item in all disabled menu', function(done) {
var menu = fixture('only-disabled');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press up
MockInteractions.keyDownOn(menu, 38);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, undefined, 'no focused item');
done();
});
});
});

test('focusing on item using key press skips disabled items', function(done) {
var menu = fixture('disabled');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press 'b'
MockInteractions.keyDownOn(menu, 66);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, menu.items[2], 'menu.items[2] is focused');
done();
});
});
});

test('focusing on item using key press ignores disabled items', function(done) {
var menu = fixture('disabled');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press 'c'
MockInteractions.keyDownOn(menu, 67);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, menu.items[0], 'menu.items[0] is focused');
done();
});
});
});

test('focusing on item using key press in all disabled items', function(done) {
var menu = fixture('only-disabled');
MockInteractions.focus(menu);

// Wait for async focus
Polymer.Base.async(function() {
// Key press 'c'
MockInteractions.keyDownOn(menu, 67);

Polymer.Base.async(function() {
var focusedItem = Polymer.dom(menu).node.focusedItem;
assert.equal(focusedItem, undefined, 'no focused item');
done();
});
});
});

test('focusing non-item content does not auto-focus an item', function(done) {
var menu = fixture('basic');
menu.extraContent.focus();
Expand Down

0 comments on commit 57ebc50

Please sign in to comment.