diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 6c1baf89ce5..6ca5b72f31d 100644 --- a/src/components/legend/draw.js +++ b/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() { diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js index 5c0b3b9cf28..f6cb5b0b63d 100644 --- a/test/jasmine/tests/legend_test.js +++ b/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); + }); +});