Refine focus behavior for inspector (fixes #1277)

Auto-focus the search field only right after finishing drawing.
At that point, the radial menu isn't shown anyway. So then the
flow for correcting geometry before assigning a preset is:

 1. Draw.
 2. Finish drawing. The search field is focused, and no
    radial menu is open.
 3. Click again to reselect the feature and show menu.
    Now the search field is blurred.

In other words: when the menu is shown, search should not be
focused. When search is focused, the menu should not be shown.

js/id/behavior/draw_way.js

@@ -168,7 +168,7 @@ iD.behavior.DrawWay = function(context, wayId, index, mode, baseGraph) {
 
         var way = context.entity(wayId);
         if (way) {
-            context.enter(iD.modes.Select(context, [way.id], true));
+            context.enter(iD.modes.Select(context, [way.id]).newFeature(true));
         } else {
             context.enter(iD.modes.Browse(context));
         }

js/id/modes/select.js

@@ -1,4 +1,4 @@
-iD.modes.Select = function(context, selection, initial) {
+iD.modes.Select = function(context, selection) {
     var mode = {
         id: 'select',
         button: 'browse'
@@ -11,15 +11,16 @@ iD.modes.Select = function(context, selection, initial) {
 
     if (!selection.length) return iD.modes.Browse(context);
 
-    var inspector = singular() && iD.ui.Inspector(context, singular()),
-        keybinding = d3.keybinding('select'),
+    var keybinding = d3.keybinding('select'),
         timeout = null,
         behaviors = [
             iD.behavior.Hover(),
             iD.behavior.Select(context),
             iD.behavior.Lasso(context),
             iD.modes.DragNode(context).behavior],
-        radialMenu;
+        inspector,
+        radialMenu,
+        newFeature = false;
 
     var wrap = context.container()
         .select('.inspector-wrap');
@@ -51,10 +52,17 @@ iD.modes.Select = function(context, selection, initial) {
     };
 
     mode.reselect = function() {
+        context.surface().node().focus();
         positionMenu();
         showMenu();
     };
 
+    mode.newFeature = function(_) {
+        if (!arguments.length) return newFeature;
+        newFeature = _;
+        return mode;
+    };
+
     mode.enter = function() {
         behaviors.forEach(function(behavior) {
             context.install(behavior);
@@ -85,6 +93,9 @@ iD.modes.Select = function(context, selection, initial) {
         }), true));
 
         if (singular()) {
+            inspector = iD.ui.Inspector(context, singular())
+                .newFeature(newFeature);
+
             wrap.call(inspector);
         }
 
@@ -148,7 +159,7 @@ iD.modes.Select = function(context, selection, initial) {
         selectElements();
 
         radialMenu = iD.ui.RadialMenu(operations);
-        var show = d3.event && !initial;
+        var show = d3.event && !newFeature;
 
         if (show) {
             positionMenu();

js/id/ui/inspector.js

@@ -1,6 +1,7 @@
 iD.ui.Inspector = function(context, entity) {
     var tagEditor,
-        id = entity.id;
+        id = entity.id,
+        newFeature = false;
 
     function changeTags(tags) {
         var entity = context.entity(id);
@@ -48,6 +49,7 @@ iD.ui.Inspector = function(context, entity) {
             .classed('pane tag-pane', true);
 
         var presetGrid = iD.ui.PresetGrid(context, entity)
+            .newFeature(newFeature)
             .on('close', browse)
             .on('choose', function(preset) {
                 var right = panewrap.style('right').indexOf('%') > 0 ? '0%' : '0px';
@@ -118,5 +120,11 @@ iD.ui.Inspector = function(context, entity) {
             .on('change.inspector', null);
     };
 
+    inspector.newFeature = function(_) {
+        if (!arguments.length) return newFeature;
+        newFeature = _;
+        return inspector;
+    };
+
     return inspector;
 };

js/id/ui/preset_grid.js

@@ -2,7 +2,8 @@ iD.ui.PresetGrid = function(context, entity) {
     var event = d3.dispatch('choose', 'close'),
         defaultLimit = 9,
         currentlyDrawn = 9,
-        presets;
+        presets,
+        newFeature = false;
 
     function presetgrid(selection, preset) {
 
@@ -102,7 +103,9 @@ iD.ui.PresetGrid = function(context, entity) {
         searchwrap.append('span')
             .attr('class', 'icon search');
 
-        search.node().focus();
+        if (newFeature) {
+            search.node().focus();
+        }
 
         function choose(d) {
             // Category
@@ -243,5 +246,11 @@ iD.ui.PresetGrid = function(context, entity) {
         }
     }
 
+    presetgrid.newFeature = function(_) {
+        if (!arguments.length) return newFeature;
+        newFeature = _;
+        return presetgrid;
+    };
+
     return d3.rebind(presetgrid, event, 'on');
 };