attempt to keep class attribute order and duplicates intact - fixes #…

…2903
ractivejs · Mar 7, 2017 · c07cda2 · c07cda2
1 parent b3035f0
commit c07cda2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/src/view/items/element/attribute/getUpdateDelegate.js b/src/view/items/element/attribute/getUpdateDelegate.js
@@ -267,22 +267,7 @@ function updateClassName ( reset ) {
 	const attr = readClass( this.node.className );
 	const prev = this.previous || attr.slice( 0 );
 
-	let i = 0;
-	while ( i < value.length ) {
-		if ( !~attr.indexOf( value[i] ) ) attr.push( value[i] );
-		i++;
-	}
-
-	// remove now-missing classes
-	i = prev.length;
-	while ( i-- ) {
-		if ( !~value.indexOf( prev[i] ) ) {
-			const idx = attr.indexOf( prev[i] );
-			if ( ~idx ) attr.splice( idx, 1 );
-		}
-	}
-
-	const className = attr.join( ' ' );
+	const className = value.concat( attr.filter( c => !~prev.indexOf( c ) ) ).join( ' ' );
 
 	if ( className !== this.node.className ) {
 		this.node.className = className;

diff --git a/test/browser-tests/attributes.js b/test/browser-tests/attributes.js
@@ -15,7 +15,7 @@ export default function () {
 		span.className += ' yep';
 		r.set( 'classes', 'foo baz' );
 
-		t.equal( span.className, 'foo yep baz' );
+		t.equal( span.className, 'foo baz yep' );
 	});
 
 	test( `style attributes only update the styles in their content`, t => {
@@ -146,7 +146,7 @@ export default function () {
 		r.toggle( 'foo' );
 		t.equal( span.className, 'bar baz' );
 		r.toggle( 'foo' );
-		t.equal( span.className, 'bar baz foo' );
+		t.equal( span.className, 'bar foo baz' );
 	});
 
 	test( `class attributes don't override class directives at render (#2565)`, t => {
@@ -187,4 +187,31 @@ export default function () {
 
 		t.ok( r.find( 'div' ).getAttribute( 'data-foo' ) === 'yep' );
 	});
+
+	test( `class attributes try to update in original order where possible (#2903)`, t => {
+		const r = new Ractive({
+			el: fixture,
+			template: `<div class="{{classes.join(' ')}}" />`,
+			data: {
+				classes: [ 'a', 'b', 'c' ]
+			}
+		});
+
+		const div = r.find( 'div' );
+
+		r.push( 'classes', 'd', 'e' );
+		t.equal( div.className, 'a b c d e' );
+
+		r.splice( 'classes', 2, 0, 'bb' );
+		t.equal( div.className, 'a b bb c d e' );
+
+		r.set( 'classes', [] );
+		t.equal( div.className, '' );
+
+		r.set( 'classes', [ 'z', 'c', 'b' ] );
+		t.equal( div.className, 'z c b' );
+
+		r.set( 'classes', [ 'a', 'b', 'c' ] );
+		t.equal( div.className, 'a b c' );
+	});
 }
diff --git a/test/browser-tests/partials.js b/test/browser-tests/partials.js
@@ -530,7 +530,7 @@ export default function() {
 
 		t.htmlEqual( fixture.innerHTML, '<div class="wrapped foo around" id="foo"></div>' );
 		ractive.resetPartial( 'foo', 'nfoo' );
-		t.htmlEqual( fixture.innerHTML, '<div class="wrapped around nfoo" id="nfoo"></div>' );
+		t.htmlEqual( fixture.innerHTML, '<div class="wrapped nfoo around" id="nfoo"></div>' );
 	});
 
 	test( 'Partials in attribute blocks can be changed with resetPartial', t => {