diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
index 0fbab3a3e13..c7970bd9ec6 100644
--- a/src/components/legend/draw.js
+++ b/src/components/legend/draw.js
@@ -384,7 +384,7 @@ function drawTexts(g, gd) {
var transforms = legendItem.trace.transforms,
direction = transforms[transforms.length - 1].direction;
- astr = direction + '.legenditem.name';
+ astr = direction + '.name';
}
else astr = 'name';
diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js
index f6e292cf4dc..207b5ddb4c7 100644
--- a/test/jasmine/tests/finance_test.js
+++ b/test/jasmine/tests/finance_test.js
@@ -963,3 +963,87 @@ describe('finance charts updates:', function() {
});
});
});
+
+describe('finance charts *special* handlers:', function() {
+
+ afterEach(destroyGraphDiv);
+
+ it('`editable: true` handlers should work', function(done) {
+
+ var gd = createGraphDiv();
+
+ function editText(itemNumber, newText) {
+ var textNode = d3.selectAll('text.legendtext')
+ .filter(function(_, i) { return i === itemNumber; }).node();
+ textNode.dispatchEvent(new window.MouseEvent('click'));
+
+ var editNode = d3.select('.plugin-editable.editable').node();
+ editNode.dispatchEvent(new window.FocusEvent('focus'));
+
+ editNode.textContent = newText;
+ editNode.dispatchEvent(new window.FocusEvent('focus'));
+ editNode.dispatchEvent(new window.FocusEvent('blur'));
+ }
+
+ // makeEditable in svg_text_utils clears the edit
in
+ // a 0-second transition, so push the resolve call at the back
+ // of the rendering queue to make sure the edit
is properly
+ // cleared after each mocked text edits.
+ function delayedResolve(resolve) {
+ setTimeout(function() { return resolve(gd); }, 0);
+ }
+
+ Plotly.plot(gd, [
+ Lib.extendDeep({}, mock0, { type: 'ohlc' }),
+ Lib.extendDeep({}, mock0, { type: 'candlestick' })
+ ], {}, {
+ editable: true
+ })
+ .then(function(gd) {
+ return new Promise(function(resolve) {
+ gd.once('plotly_restyle', function(eventData) {
+ expect(eventData[0]['increasing.name']).toEqual('0');
+ expect(eventData[1]).toEqual([0]);
+ delayedResolve(resolve);
+ });
+
+ editText(0, '0');
+ });
+ })
+ .then(function(gd) {
+ return new Promise(function(resolve) {
+ gd.once('plotly_restyle', function(eventData) {
+ expect(eventData[0]['decreasing.name']).toEqual('1');
+ expect(eventData[1]).toEqual([0]);
+ delayedResolve(resolve);
+ });
+
+ editText(1, '1');
+ });
+ })
+ .then(function(gd) {
+ return new Promise(function(resolve) {
+ gd.once('plotly_restyle', function(eventData) {
+ expect(eventData[0]['decreasing.name']).toEqual('2');
+ expect(eventData[1]).toEqual([1]);
+ delayedResolve(resolve);
+ });
+
+ editText(3, '2');
+ });
+ })
+ .then(function(gd) {
+ return new Promise(function(resolve) {
+ gd.once('plotly_restyle', function(eventData) {
+ expect(eventData[0]['increasing.name']).toEqual('3');
+ expect(eventData[1]).toEqual([1]);
+ delayedResolve(resolve);
+ });
+
+ editText(2, '3');
+ });
+ })
+ .then(done);
+ });
+
+});