From 5dda54ea52423ed26ca193afe2a6655390bd96ed Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 12 Apr 2013 10:08:44 -0400
Subject: [PATCH] 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 |  2 +-
 js/id/modes/select.js      | 21 ++++++++++++++++-----
 js/id/ui/inspector.js      | 10 +++++++++-
 js/id/ui/preset_grid.js    | 13 +++++++++++--
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/js/id/behavior/draw_way.js b/js/id/behavior/draw_way.js
index 3b9e3d322e..fca050b4c7 100644
--- a/js/id/behavior/draw_way.js
+++ b/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));
         }
diff --git a/js/id/modes/select.js b/js/id/modes/select.js
index 53740ded0e..7d7e0ac78d 100644
--- a/js/id/modes/select.js
+++ b/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();
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index 7080cd4280..cf8d9c16c6 100644
--- a/js/id/ui/inspector.js
+++ b/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;
 };
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index d025a9133b..0f9f6b832f 100644
--- a/js/id/ui/preset_grid.js
+++ b/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');
 };