1852 persistent click via select points

src/plots/cartesian/dragbox.js

@@ -231,13 +231,13 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         if(numClicks === 2 && !singleEnd) doubleClick();
 
         if(isMainDrag) {
-            if(clickmode.indexOf('event') > -1) {
-                Fx.click(gd, evt, plotinfo.id);
-            }
-
             if(clickmode.indexOf('select') > -1) {
                 selectOnClick(evt, gd, xaxes, yaxes, plotinfo.id, dragOptions);
             }
+
+            if(clickmode.indexOf('event') > -1) {
+                Fx.click(gd, evt, plotinfo.id);
+            }
         }
         else if(numClicks === 1 && singleEnd) {
             var ax = ns ? ya0 : xa0,

src/plots/geo/geo.js

@@ -452,18 +452,18 @@ proto.updateFx = function(fullLayout, geoLayout) {
     bgRect.on('click', function() {
         // For select and lasso the dragElement is handling clicks
         if(dragMode !== 'select' && dragMode !== 'lasso') {
+            if(clickMode.indexOf('select') > -1) {
+                selectOnClick(d3.event, gd, [_this.xaxis], [_this.yaxis],
+                  _this.id, dragOptions);
+            }
+
             if(clickMode.indexOf('event') > -1) {
                 // TODO: like pie and mapbox, this doesn't support right-click
                 // actually this one is worse, as right-click starts a pan, or leaves
                 // select in a weird state.
                 // Also, only tangentially related, we should cancel hover during pan
                 Fx.click(gd, d3.event);
             }
-
-            if(clickMode.indexOf('select') > -1) {
-                selectOnClick(d3.event, gd, [_this.xaxis], [_this.yaxis],
-                  _this.id, dragOptions);
-            }
         }
     });
 };

src/plots/mapbox/mapbox.js

@@ -177,15 +177,6 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         Fx.hover(gd, evt, self.id);
     });
 
-    map.on('click', function(evt) {
-        // TODO: this does not support right-click. If we want to support it, we
-        // would likely need to change mapbox to use dragElement instead of straight
-        // mapbox event binding. Or perhaps better, make a simple wrapper with the
-        // right mousedown, mousemove, and mouseup handlers just for a left/right click
-        // pie would use this too.
-        Fx.click(gd, evt.originalEvent);
-    });
-
     function unhover() {
         Fx.loneUnhover(fullLayout._toppaper);
     }
@@ -236,13 +227,18 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         return function(evt) {
             var clickMode = gd._fullLayout.clickmode;
 
-            if(clickMode.indexOf('event') > -1) {
-                Fx.click(gd, evt.originalEvent);
-            }
-
             if(clickMode.indexOf('select') > -1) {
                 selectOnClick(evt.originalEvent, gd, [self.xaxis], [self.yaxis], self.id, dragOptions);
             }
+
+            if(clickMode.indexOf('event') > -1) {
+                // TODO: this does not support right-click. If we want to support it, we
+                // would likely need to change mapbox to use dragElement instead of straight
+                // mapbox event binding. Or perhaps better, make a simple wrapper with the
+                // right mousedown, mousemove, and mouseup handlers just for a left/right click
+                // pie would use this too.
+                Fx.click(gd, evt.originalEvent);
+            }
         };
     };
 };

src/plots/polar/polar.js

@@ -849,13 +849,13 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
             Registry.call('relayout', gd, updateObj);
         }
 
-        if(clickMode.indexOf('event') > -1) {
-            Fx.click(gd, evt, _this.id);
-        }
-
         if(clickMode.indexOf('select') > -1 && numClicks === 1) {
             selectOnClick(evt, gd, [_this.xaxis], [_this.yaxis], _this.id, dragOpts);
         }
+
+        if(clickMode.indexOf('event') > -1) {
+            Fx.click(gd, evt, _this.id);
+        }
     }
 
     dragOpts.prepFn = function(evt, startX, startY) {

src/plots/ternary/ternary.js

@@ -503,13 +503,13 @@ proto.initInteractions = function() {
             Registry.call('relayout', gd, attrs);
         }
 
-        if(clickMode.indexOf('event') > -1) {
-            Fx.click(gd, evt, _this.id);
-        }
-
         if(clickMode.indexOf('select') > -1 && numClicks === 1) {
             selectOnClick(evt, gd, [_this.xaxis], [_this.yaxis], _this.id, dragOptions);
         }
+
+        if(clickMode.indexOf('event') > -1) {
+            Fx.click(gd, evt, _this.id);
+        }
     }
 
     function zoomPrep(e, startX, startY) {

test/jasmine/tests/select_test.js

@@ -649,28 +649,8 @@ describe('Click-to-select', function() {
         ]
           .forEach(function(testCase) {
               var ciAnnotation = testCase.gl ? 'gl' : 'flaky';
-              it('@' + ciAnnotation + ' trace type ' + testCase.traceType, function(done) {
-                  var defaultLayoutOpts = {
-                      layout: {
-                          clickmode: 'event+select',
-                          dragmode: 'pan',
-                          hovermode: 'closest'
-                      }
-                  };
-                  var customLayoutOptions = {
-                      layout: testCase.layoutOptions
-                  };
-                  var customConfigOptions = {
-                      config: testCase.configOptions
-                  };
-                  var mockCopy = Lib.extendDeep(
-                    {},
-                    testCase.mock,
-                    defaultLayoutOpts,
-                    customLayoutOptions,
-                    customConfigOptions);
-
-                  Plotly.plot(gd, mockCopy.data, mockCopy.layout, mockCopy.config)
+              it('@' + ciAnnotation + ' trace type ' + testCase.label, function(done) {
+                  Plotly.plot(gd, testCase.mock.data, testCase.mock.layout, testCase.mock.config)
                     .then(function() {
                         return _immediateClickPt(testCase);
                     })
@@ -693,24 +673,78 @@ describe('Click-to-select', function() {
                     .then(done);
               });
           });
+    });
 
-        function testCase(traceType, mock, x, y, expectedPts, layoutOptions, configOptions) {
-            return {
-                traceType: traceType,
-                mock: mock,
-                layoutOptions: layoutOptions,
-                x: x,
-                y: y,
-                expectedPts: expectedPts,
-                configOptions: configOptions,
-                gl: false,
-                enableGl: function() {
-                    this.gl = true;
-                    return this;
-                }
-            };
-        }
+    describe('triggers \'plotly_selected\' before \'plotly_click\'', function() {
+        [
+            testCase('cartesian', require('@mocks/14.json'), 270, 160, [7]),
+            testCase('geo', require('@mocks/geo_scattergeo-locations.json'), 285, 240, [1]),
+            testCase('ternary', require('@mocks/ternary_markers.json'), 485, 335, [7]),
+            testCase('mapbox', require('@mocks/mapbox_0.json'), 650, 195, [[2], []], {},
+              { mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN }),
+            testCase('polar', require('@mocks/polar_scatter.json'), 130, 290,
+              [[], [], [], [19], [], []], { dragmode: 'zoom' })
+        ].forEach(function(testCase) {
+            it('@flaky for base plot ' + testCase.label, function(done) {
+                Plotly.plot(gd, testCase.mock.data, testCase.mock.layout, testCase.mock.config)
+                  .then(function() {
+                      var clickHandlerCalled = false;
+                      var selectedHandlerCalled = false;
+
+                      gd.on('plotly_selected', function() {
+                          expect(clickHandlerCalled).toBe(false);
+                          selectedHandlerCalled = true;
+                      });
+                      gd.on('plotly_click', function() {
+                          clickHandlerCalled = true;
+                          expect(selectedHandlerCalled).toBe(true);
+                          done();
+                      });
+
+                      return click(testCase.x, testCase.y);
+                  })
+                  .catch(failTest)
+                  .then(done);
+            });
+        });
     });
+
+    function testCase(label, mock, x, y, expectedPts, layoutOptions, configOptions) {
+        var defaultLayoutOpts = {
+            layout: {
+                clickmode: 'event+select',
+                dragmode: 'pan',
+                hovermode: 'closest'
+            }
+        };
+        var customLayoutOptions = {
+            layout: layoutOptions
+        };
+        var customConfigOptions = {
+            config: configOptions
+        };
+        var mockCopy = Lib.extendDeep(
+          {},
+          mock,
+          defaultLayoutOpts,
+          customLayoutOptions,
+          customConfigOptions);
+
+        return {
+            label: label,
+            mock: mockCopy,
+            layoutOptions: layoutOptions,
+            x: x,
+            y: y,
+            expectedPts: expectedPts,
+            configOptions: configOptions,
+            gl: false,
+            enableGl: function() {
+                this.gl = true;
+                return this;
+            }
+        };
+    }
 });
 
 describe('Test select box and lasso in general:', function() {