Fixes problem with css classes not being rendered - Fixes #151

The logic for removing duplicate css classes was incorrect, causing wrong css to be removed. This fixes that.
metal · Aug 29, 2016 · aa49bc6 · aa49bc6
1 parent f9ad019
commit aa49bc6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/packages/metal-incremental-dom/src/IncrementalDomRenderer.js b/packages/metal-incremental-dom/src/IncrementalDomRenderer.js
@@ -48,8 +48,10 @@ class IncrementalDomRenderer extends ComponentRenderer {
 	 */
 	addElementClasses_(elementClasses, args) {
 		for (var i = 3; i < args.length; i += 2) {
-			if (args[i] === 'class' && args[i + 1].indexOf(elementClasses) === -1) {
-				args[i + 1] += ' ' + elementClasses;
+			if (args[i] === 'class') {
+				args[i + 1] = this.removeDuplicateClasses_(
+					args[i + 1] + ' ' + elementClasses
+				);
 				return;
 			}
 		}
@@ -581,6 +583,25 @@ class IncrementalDomRenderer extends ComponentRenderer {
 		}
 	}
 
+	/**
+	 * Removes duplicate css classes from the given string.
+	 * @param {string} cssClasses
+	 * @return {string}
+	 * @protected
+	 */
+	removeDuplicateClasses_(cssClasses) {
+		var noDuplicates = [];
+		var all = cssClasses.split(/\s+/);
+		var used = {};
+		for (var i = 0; i < all.length; i++) {
+			if (!used[all[i]]) {
+				used[all[i]] = true;
+				noDuplicates.push(all[i]);
+			}
+		}
+		return noDuplicates.join(' ');
+	}
+
 	/**
 	 * Creates and renders the given function, which can either be a simple
 	 * incremental dom function or a component constructor.

diff --git a/packages/metal-incremental-dom/test/IncrementalDomRenderer.js b/packages/metal-incremental-dom/test/IncrementalDomRenderer.js
@@ -428,15 +428,15 @@ describe('IncrementalDomRenderer', function() {
 	it('should not cause css classes to be added twice due to "elementClasses"', function() {
 		class TestComponent extends Component {
 			render() {
-				IncDom.elementVoid('div', null, null, 'class', this.elementClasses);
+				IncDom.elementVoid('div', null, null, 'class', 'test1   test2');
 			}
 		}
 		TestComponent.RENDERER = IncrementalDomRenderer;
 
 		component = new TestComponent({
-			elementClasses: 'test'
+			elementClasses: 'test2 test3'
 		});
-		assert.strictEqual('test', component.element.getAttribute('class'));
+		assert.strictEqual('test1 test2 test3', component.element.getAttribute('class'));
 	});
 
 	describe('Existing Content', function() {