From 5ca4246a6dd9d25cde464906cf69425f0a052a87 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 26 Apr 2017 13:33:21 -0400
Subject: [PATCH] If drawing a way, don't hover on a node that was just placed
 (closes #3974)

---
 modules/behavior/hover.js   | 14 ++++++++++++--
 modules/svg/midpoints.js    |  3 ++-
 test/spec/behavior/hover.js |  3 ++-
 test/spec/renderer/map.js   | 11 +++++++----
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/modules/behavior/hover.js b/modules/behavior/hover.js
index 36f4355f9..fc073f086 100644
--- a/modules/behavior/hover.js
+++ b/modules/behavior/hover.js
@@ -13,9 +13,10 @@ import { utilRebind } from '../util/rebind';
    Only one of these elements can have the :hover pseudo-class, but all of them will
    have the .hover class.
  */
-export function behaviorHover() {
+export function behaviorHover(context) {
     var dispatch = d3.dispatch('hover'),
         _selection = d3.select(null),
+        newNode = null,
         buttonDown,
         altDisables,
         target;
@@ -51,6 +52,7 @@ export function behaviorHover() {
 
     var hover = function(selection) {
         _selection = selection;
+        newNode = null;
 
         _selection
             .on('mouseover.hover', mouseover)
@@ -99,7 +101,15 @@ export function behaviorHover() {
             _selection.selectAll('.hover-suppressed')
                 .classed('hover-suppressed', false);
 
-            if (target instanceof osmEntity) {
+            if (target instanceof osmEntity && target !== newNode) {
+
+                // If drawing a way, don't hover on a node that was just placed. #3974
+                var mode = context.mode() && context.mode().id;
+                if ((mode === 'draw-line' || mode === 'draw-area') && !newNode && target.type === 'node') {
+                    newNode = target;
+                    return;
+                }
+
                 var selector = '.' + target.id;
 
                 if (target.type === 'relation') {
diff --git a/modules/svg/midpoints.js b/modules/svg/midpoints.js
index 112348492..4a56922e3 100644
--- a/modules/svg/midpoints.js
+++ b/modules/svg/midpoints.js
@@ -17,7 +17,8 @@ export function svgMidpoints(projection, context) {
     return function drawMidpoints(selection, graph, entities, filter, extent) {
         var layer = selection.selectAll('.layer-hit');
 
-        if (context.mode().id !== 'select') {
+        var mode = context.mode();
+        if (mode && mode.id !== 'select') {
             layer.selectAll('g.midpoint').remove();
             return;
         }
diff --git a/test/spec/behavior/hover.js b/test/spec/behavior/hover.js
index 35552bd82..8ad0cf3d8 100644
--- a/test/spec/behavior/hover.js
+++ b/test/spec/behavior/hover.js
@@ -4,7 +4,8 @@ describe('iD.behaviorHover', function() {
     beforeEach(function() {
         container = d3.select('body').append('div');
         context = {
-            hover: function() {}
+            hover: function() {},
+            mode: function() { return { id: 'browse' }; }
         };
     });
 
diff --git a/test/spec/renderer/map.js b/test/spec/renderer/map.js
index fba86bd4c..d02974e96 100644
--- a/test/spec/renderer/map.js
+++ b/test/spec/renderer/map.js
@@ -1,12 +1,15 @@
 describe('iD.Map', function() {
-    var context, map;
+    var content, context, map;
 
     beforeEach(function() {
+        content = d3.select('body').append('div');
         context = iD.Context();
-        context.container(d3.select(document.createElement('div')));
         map = context.map();
-        d3.select(document.createElement('div'))
-            .call(map);
+        content.call(map);
+    });
+
+    afterEach(function() {
+        content.remove();
     });
 
     describe('#zoom', function() {