Merge pull request #1276 from carloslancha/issue-1275-sync-data

Fixes #1275 - Sync data attributes in ClayComponent
liferay · Oct 31, 2018 · a396d1c · a396d1c
2 parents 9c1a553 + 2643914
commit a396d1c
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/packages/clay-component/src/ClayComponent.js b/packages/clay-component/src/ClayComponent.js
@@ -47,13 +47,15 @@ class ClayComponent extends Component {
 	rendered(...args) {
 		super.rendered(...args);
 
-		for (let dataKey in this.data) {
-			if (Object.prototype.hasOwnProperty.call(this.data, dataKey)) {
-				this.element.setAttribute(
-					'data-' + dataKey,
-					this.data[dataKey]
-				);
-			}
+		this._renderDataAttributes();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	syncData(newVal, prevVal) {
+		if (newVal != prevVal) {
+			this._renderDataAttributes();
 		}
 	}
 
@@ -121,6 +123,20 @@ class ClayComponent extends Component {
 		this.runListeners_(listeners, args, facade);
 		return true;
 	}
+
+	/**
+	 * Places the data attributes in the dom.
+	 */
+	_renderDataAttributes() {
+		for (let dataKey in this.data) {
+			if (Object.prototype.hasOwnProperty.call(this.data, dataKey)) {
+				this.element.setAttribute(
+					'data-' + dataKey,
+					this.data[dataKey]
+				);
+			}
+		}
+	}
 }
 
 /**