Merge pull request #3635 from plotly/fix-legend-3627

legend: enable selection of a trace by clicking its symbol

Author: antoinerg

src/components/legend/draw.js

@@ -118,10 +118,13 @@ module.exports = function draw(gd) {
     })
     .each(function() {
         d3.select(this)
-            .call(drawTexts, gd, maxLength)
-            .call(setupTraceToggle, gd);
+            .call(drawTexts, gd, maxLength);
     })
-    .call(style, gd);
+    .call(style, gd)
+    .each(function() {
+        d3.select(this)
+            .call(setupTraceToggle, gd);
+    });
 
     Lib.syncOrAsync([Plots.previousPromises,
         function() {

test/jasmine/tests/legend_test.js

@@ -15,6 +15,8 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var assertPlotSize = require('../assets/custom_assertions').assertPlotSize;
 
+var mock = require('@mocks/legend_horizontal.json');
+
 var Drawing = require('@src/components/drawing');
 
 describe('legend defaults', function() {
@@ -1639,3 +1641,28 @@ describe('legend interaction', function() {
         });
     });
 });
+
+describe('legend DOM', function() {
+    'use strict';
+
+    afterEach(destroyGraphDiv);
+
+    it('draws `legendtoggle` last to make sure it is unobstructed', function(done) {
+        var gd = createGraphDiv();
+        Plotly.newPlot(gd, mock)
+        .then(function() {
+            // Find legend in figure
+            var legend = document.getElementsByClassName('legend')[0];
+
+            // For each legend item
+            var legendItems = legend.getElementsByClassName('traces');
+            Array.prototype.slice.call(legendItems).forEach(function(legendItem) {
+                // Check that the last element is our `legendtoggle`
+                var lastEl = legendItem.children[legendItem.children.length - 1];
+                expect(lastEl.getAttribute('class')).toBe('legendtoggle');
+            });
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});