Fix issue where multiple arrows were showing up initially in change list

Change-Id: Ic36a6b4cc74e10b025d7c1dc864e0e762a6ec5d9
This commit is contained in:
Andrew Bonventre 2016-01-07 17:04:21 -05:00 committed by Dave Borowitz
parent 4bff914df3
commit 1a36f03898
2 changed files with 31 additions and 25 deletions

View File

@ -58,8 +58,7 @@ limitations under the License.
<div class="groupHeader">[[_groupTitle(groupIndex)]]</div> <div class="groupHeader">[[_groupTitle(groupIndex)]]</div>
</template> </template>
<template is="dom-repeat" items="[[changeGroup]]" as="change"> <template is="dom-repeat" items="[[changeGroup]]" as="change">
<gr-change-list-item change="[[change]]" <gr-change-list-item change="[[change]]"></gr-change-list-item>
selected="[[_isSelected(groupIndex, index)]]"></gr-change-list-item>
</template> </template>
</template> </template>
</template> </template>
@ -118,10 +117,6 @@ limitations under the License.
'j k o enter': '_handleKey', 'j k o enter': '_handleKey',
}, },
_isSelected: function(groupIndex, index) {
return index == this.selectedIndex;
},
_changesChanged: function(changes) { _changesChanged: function(changes) {
this.groups = [changes]; this.groups = [changes];
}, },
@ -139,6 +134,13 @@ limitations under the License.
} }
} }
} }
// Allow for the elements to render before resetting the selectedIndex.
this.async(function() {
// Setting the property would have no effect if the index is 0 (e.g.
// at element init) so call the observer directly.
this._selectedIndexChanged(0);
}.bind(this), 1);
}, },
_groupTitle: function(groupIndex) { _groupTitle: function(groupIndex) {

View File

@ -48,7 +48,7 @@ limitations under the License.
element = fixture('basic'); element = fixture('basic');
}); });
test('keyboard shortcuts', function() { test('keyboard shortcuts', function(done) {
element.changes = [ element.changes = [
{_number: 0}, {_number: 0},
{_number: 1}, {_number: 1},
@ -60,28 +60,32 @@ limitations under the License.
assert.equal(elementItems.length, 3); assert.equal(elementItems.length, 3);
assert.equal(element.selectedIndex, 0); assert.equal(element.selectedIndex, 0);
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' element.async(function() {
assert.equal(element.selectedIndex, 1); assert.isTrue(elementItems[0].selected);
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j' MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
assert.equal(element.selectedIndex, 1);
MockInteractions.pressAndReleaseKeyOn(element, 74); // 'j'
var showStub = sinon.stub(page, 'show'); var showStub = sinon.stub(page, 'show');
assert.equal(element.selectedIndex, 2); assert.equal(element.selectedIndex, 2);
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter' MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter'
assert(showStub.lastCall.calledWithExactly('/c/2/'), assert(showStub.lastCall.calledWithExactly('/c/2/'),
'Should navigate to /c/2/'); 'Should navigate to /c/2/');
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k' MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k'
assert.equal(element.selectedIndex, 1); assert.equal(element.selectedIndex, 1);
MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter' MockInteractions.pressAndReleaseKeyOn(element, 13); // 'enter'
assert(showStub.lastCall.calledWithExactly('/c/1/'), assert(showStub.lastCall.calledWithExactly('/c/1/'),
'Should navigate to /c/1/'); 'Should navigate to /c/1/');
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k' MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k'
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k' MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k'
MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k' MockInteractions.pressAndReleaseKeyOn(element, 75); // 'k'
assert.equal(element.selectedIndex, 0); assert.equal(element.selectedIndex, 0);
showStub.restore(); showStub.restore();
done()
}, 1);
}); });
}); });