From 7f49040507ed09f16a01ec73e6d49108bf231850 Mon Sep 17 00:00:00 2001
From: Anthony Pessy <anthony.pessy@gmail.com>
Date: Sun, 25 Aug 2019 06:43:18 +0200
Subject: [PATCH] correct DOMException when data name contains unicode (#2686)

---
 spec/class-spec.js | 13 +++++++++----
 src/class-utils.js |  9 +++++++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/spec/class-spec.js b/spec/class-spec.js
index 8d9ab81d0..b88df0bd1 100644
--- 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
index e29197f21..548f29b59 100644
--- 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);