correct DOMException when data name contains unicode (c3js#2686)

socrata · Oct 31, 2019 · 077aa2b · 077aa2b
1 parent fcd8113
commit 077aa2b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/spec/class-spec.js b/spec/class-spec.js
@@ -8,7 +8,8 @@ describe('c3 chart class', function () {
             columns: [
                 ['data1', 30, 200, 100, 400, 150, 250],
                 ['data2 prefix', 50, 20, 10, 40, 15, 25],
-                ['data3 мужчины', 150, 120, 110, 140, 115, 125]
+                ['data3 мужчины', 150, 120, 110, 140, 115, 125],
+                ['my\u007fapp', 10, 20, 40, 20, 65, 55]
             ]
         }
     };
@@ -52,20 +53,24 @@ describe('c3 chart class', function () {
 
         it('should escape special characters', function () {
             var input = 'data1 !@#$%^&*()_=+,.<>"\':;[]/|?~`{}\\',
-                expected = '-data1-\\!\\@\\#\\$\\%\\^\\&\\*\\(\\)\\_\\=\\+\\,\\.\\<\\>\\"\\\'\\:\\;\\[\\]\\/\\|\\?\\~\\`\\{\\}\\\\',
+                expected = '-data1-\\!\\@\\#\\$\\%\\^\\&\\*\\(\\)_\\=\\+\\,\\.\\<\\>\\"\\\'\\:\\;\\[\\]\\/\\|\\?\\~\\`\\{\\}\\\\',
                 suffix = chart.internal.getTargetSelectorSuffix(input);
             expect(suffix).toBe(expected);
         });
 
     });
 
-    describe('multibyte characters on chart', function () {
-
+    describe('select target in chart', function () {
         it('should replace space to "-" with multibyte characters', function () {
             var selector = '.c3-target-data3-мужчины';
             expect(chart.internal.main.select(selector).size()).toBe(1);
         });
 
+        it('should be able to select class with unicode characters', () => {
+            const selector = `.c3-target${chart.internal.getTargetSelectorSuffix(args.data.columns[3][0])}`;
+
+            expect(chart.internal.main.select(selector).size()).toBe(1);
+        });
     });
 
 });
diff --git a/src/class-utils.js b/src/class-utils.js
@@ -86,8 +86,13 @@ ChartInternal.prototype.classChartArc = function (d) {
     return CLASS.chartArc + this.classTarget(d.data.id);
 };
 ChartInternal.prototype.getTargetSelectorSuffix = function (targetId) {
-    return this.generateTargetClass(targetId)
-        .replace(/([?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\])/g, '\\$1');
+    const targetClass = this.generateTargetClass(targetId);
+    if (window.CSS && window.CSS.escape) {
+        return window.CSS.escape(targetClass);
+    }
+
+    // fallback on imperfect method for old browsers (does not handles unicode)
+    return targetClass.replace(/([?!@#$%^&*()=+,.<>'":;\[\]\/|~`{}\\])/g, '\\$1');
 };
 ChartInternal.prototype.selectorTarget = function (id, prefix) {
     return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);