From 8c03868808009c9fd5f4b9b905d11d9a300fe108 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 6 Aug 2020 14:33:09 +0100
Subject: [PATCH] DEV: Correctly render data- attributes in widget hbs
 templates (#10376)

In virtualdom, element 'properties' are not completely synonymous with element 'attributes'. In particular, `data-` properties will not be rendered as attributes. To ensure all attributes are passed through, we need to include them under an `attributes` key. For more info, see https://github.com/Matt-Esch/virtual-dom/blob/master/docs/vnode.md#custom-attributes-data-
---
 lib/javascripts/widget-hbs-compiler.js  | 23 +++++++++++++++--------
 test/javascripts/widgets/widget-test.js | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/lib/javascripts/widget-hbs-compiler.js b/lib/javascripts/widget-hbs-compiler.js
index 907ca443271..5316bd355f5 100644
--- a/lib/javascripts/widget-hbs-compiler.js
+++ b/lib/javascripts/widget-hbs-compiler.js
@@ -178,20 +178,27 @@ class Compiler {
 
         if (node.attributes.length) {
           let attributes = [];
+          let properties = [];
+
           node.attributes.forEach(a => {
-            const name = a.name === "class" ? "className" : a.name;
-            if (a.value.type === "MustacheStatement") {
-              attributes.push(
-                `"${name}":${mustacheValue(a.value, this.state)}`
-              );
+            const name = a.name;
+            const value =
+              a.value.type === "MustacheStatement"
+                ? mustacheValue(a.value, this.state)
+                : `"${a.value.chars}"`;
+
+            if (a.name === "class") {
+              properties.push(`"className":${value}`);
             } else {
-              attributes.push(`"${name}":"${a.value.chars}"`);
+              attributes.push(`"${name}":${value}`);
             }
           });
 
-          const attrString = `{${attributes.join(", ")}}`;
+          properties.push(`"attributes":{${attributes.join(", ")}}`);
+          const propertiesString = `{${properties.join(", ")}}`;
+
           instructions.push(
-            `${parentAcc}.push(virtualDom.h('${node.tag}', ${attrString}, ${innerAcc}));`
+            `${parentAcc}.push(virtualDom.h('${node.tag}', ${propertiesString}, ${innerAcc}));`
           );
         } else {
           instructions.push(
diff --git a/test/javascripts/widgets/widget-test.js b/test/javascripts/widgets/widget-test.js
index 5fcc1f28afc..a4c421aeb2c 100644
--- a/test/javascripts/widgets/widget-test.js
+++ b/test/javascripts/widgets/widget-test.js
@@ -58,6 +58,20 @@ widgetTest("hbs template - with tagName", {
   }
 });
 
+widgetTest("hbs template - with data attributes", {
+  template: `{{mount-widget widget="hbs-test" args=args}}`,
+
+  beforeEach() {
+    createWidget("hbs-test", {
+      template: hbs`<div class='mydiv' data-my-test='hello world'></div>`
+    });
+  },
+
+  test(assert) {
+    assert.equal(find("div.mydiv").data("my-test"), "hello world");
+  }
+});
+
 widgetTest("buildClasses", {
   template: `{{mount-widget widget="classname-test" args=args}}`,