diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js index 6bb72c8..7dd6c3f 100644 --- a/cosmoz-data-nav.js +++ b/cosmoz-data-nav.js @@ -471,14 +471,16 @@ index = items.indexOf(this._previouslySelectedItem); // if not found, search by id - if (index === -1) { + if (index < 0) { const prevId = this._getItemId(this._previouslySelectedItem); index = items.findIndex(item => this._getItemId(item) === prevId); } // if still not found, remain on the selected index - if (index === -1) { - index = this.selected; + if (index < 0) { + index = this.selected < items.length + ? this.selected + : items.length - 1; } this._realignElements(index); } @@ -974,6 +976,8 @@ return idx; } } else if (isSelected) { + // make sure that the instance is visible (may be a re-aligned invisible instance) + element.__instance._showHideChildren(false); // resize is a expensive operation this._renderRan = this._notifyElementResize(); } diff --git a/test/.eslintrc.json b/test/.eslintrc.json index 0c6b7b9..1e871cd 100644 --- a/test/.eslintrc.json +++ b/test/.eslintrc.json @@ -3,6 +3,9 @@ "mocha": true }, "plugins": ["mocha"], + "parserOptions": { + "ecmaVersion": 8 + }, "globals": { "a11ySuite": false, "assert": false, diff --git a/test/bugs.html b/test/bugs.html new file mode 100644 index 0000000..f7e35f3 --- /dev/null +++ b/test/bugs.html @@ -0,0 +1,148 @@ + + + + + cosmoz-data-nav-basic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/index.html b/test/index.html index a5f016e..8367601 100644 --- a/test/index.html +++ b/test/index.html @@ -10,7 +10,8 @@ WCT.loadSuites([ 'basic.html', 'resizable.html', - 'spec.html' + 'spec.html', + 'bugs.html' ]); diff --git a/test/spec.html b/test/spec.html index 481ffcf..ce8bc4e 100644 --- a/test/spec.html +++ b/test/spec.html @@ -242,17 +242,31 @@ expect(selectedSlide(nav).textContent).to.equal('id: b,index: 3otherdata'); }); - it('on `items` change, maintains `selected` to it\'s current value, ' + - 'if the last selected item is no longer present, by reference or by id', () => { - nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}]; - nav.selected = 1; - flushRenderQueue(nav); - expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1'); + context('when the last selected item is no longer present, by reference or by id', () => { + it('maintains `selected` to it\'s current value', () => { + nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}]; + nav.selected = 1; + flushRenderQueue(nav); + expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1'); + + nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}]; + expect(nav.selected).to.equal(1); + flushRenderQueue(nav); + expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1'); + }); + + it('updates `selected` if there are not enough items', () => { + nav.items = [{id: 'a'}, {id: 'e'}]; + nav.selected = 1; + flushRenderQueue(nav); + expect(selectedSlide(nav).textContent).to.equal('id: e,index: 1'); + + nav.items = [{id: 'a'}]; + expect(nav.selected).to.equal(0); + flushRenderQueue(nav); + expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0'); + }); - nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}]; - expect(nav.selected).to.equal(1); - flushRenderQueue(nav); - expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1'); }); it('resets selected to 0 when `items` is empty', () => {