Merge pull request #3577 from plotly/clear-select-on-axrange-relayout

Clear selection outline during 'axrange' relayout calls

Author: etpinard

src/plot_api/plot_api.js

@@ -32,6 +32,7 @@ var connectColorbar = require('../components/colorbar/connect');
 var initInteractions = require('../plots/cartesian/graph_interact').initInteractions;
 var xmlnsNamespaces = require('../constants/xmlns_namespaces');
 var svgTextUtils = require('../lib/svg_text_utils');
+var clearSelect = require('../plots/cartesian/select').clearSelect;
 
 var dfltConfig = require('./plot_config').dfltConfig;
 var manageArrays = require('./manage_arrays');
@@ -2001,7 +2002,13 @@ function addAxRangeSequence(seq, rangesAltered) {
             return Axes.draw(gd, 'redraw');
         };
 
+    var _clearSelect = function(gd) {
+        var zoomlayer = gd._fullLayout._zoomlayer;
+        if(zoomlayer) clearSelect(zoomlayer);
+    };
+
     seq.push(
+        _clearSelect,
         subroutines.doAutoRangeAndConstraints,
         drawAxes,
         subroutines.drawData,

test/jasmine/tests/select_test.js

@@ -1226,6 +1226,28 @@ describe('Test select box and lasso in general:', function() {
         .then(done);
     });
 
+    it('@flaky should have their selection outlines cleared during *axrange* relayout calls', function(done) {
+        var gd = createGraphDiv();
+        var fig = Lib.extendDeep({}, mock);
+        fig.layout.dragmode = 'select';
+
+        function _drag() {
+            resetEvents(gd);
+            drag(selectPath);
+            return selectedPromise;
+        }
+
+        Plotly.plot(gd, fig)
+        .then(_drag)
+        .then(function() { assertSelectionNodes(0, 2, 'after drag 1'); })
+        .then(function() { return Plotly.relayout(gd, 'xaxis.range', [-5, 5]); })
+        .then(function() { assertSelectionNodes(0, 0, 'after axrange relayout'); })
+        .then(_drag)
+        .then(function() { assertSelectionNodes(0, 2, 'after drag 2'); })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('@flaky should select the right data with the corresponding select direction', function(done) {
 
         var gd = createGraphDiv();