Merge pull request #101 from Neovici/feature/fix-realign

fix: do not update instance if it was realigned

cosmoz-data-nav.js

@@ -615,11 +615,10 @@ class CosmozDataNav extends translatable(mixinBehaviors([IronResizableBehavior],
 			return;
 		}
 
-		renderedElement.item = item;
-		const instance = renderedElement.__instance,
-			props = Object.assign({ [this.as]: item }, this._getBaseProps(index));
-
-		Object.keys(props).forEach(key => instance._setPendingProperty(key, props[key]));
+		// update instance's data-nav related props
+		const instance = renderedElement.__instance;
+		Object.entries(this._getBaseProps(index))
+			.forEach(([key, value]) => instance._setPendingProperty(key, value));
 		instance._flushProperties();
 
 		this.splice('_elements', renderedIndex, 1);

test/spec.html

@@ -55,6 +55,7 @@
 	<script type="module">
 		/* eslint-disable max-lines-per-function, max-statements, max-nested-callbacks */
 		import { flushRenderQueue, selectedSlide } from './helpers/utils';
+		import { flush as syncFlush } from '@polymer/polymer/lib/utils/flush';
 
 		describe('cosmoz-data-nav', () => {
 			describe('constructor', () => {
@@ -92,12 +93,12 @@
 
 			context('properties', () => {
 				let nav;
-				beforeEach(done => {
+				beforeEach(() => {
 					nav = fixture('basic');
 					nav._templatesObserver.flush();
 					nav.items = [{id: 1}, {id: 2}, {id: 3}];
 					flushRenderQueue(nav);
-					setTimeout(done, 50);
+					syncFlush();
 				});
 
 				describe('animating', () => {
@@ -253,6 +254,18 @@
 								expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1');
 							});
 
+							it('realigns element if already rendered', () => {
+								nav.items = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }];
+								nav.selected = 1;
+								flushRenderQueue(nav);
+								expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1');
+
+								nav.items = [{ id: 'a' }, { id: 'c' }, { id: 'd' }];
+								expect(nav.selected).to.equal(1);
+								flushRenderQueue(nav);
+								expect(selectedSlide(nav).textContent).to.equal('id: c,index: 1');
+							});
+
 							it('updates `selected` if there are not enough items', () => {
 								nav.items = [{id: 'a'}, {id: 'e'}];
 								nav.selected = 1;