From 9cc9a0098840363b6497337951b53aa583f4aa44 Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Tue, 10 Dec 2013 19:45:28 +0000
Subject: [PATCH] Restore autofocusing of the search field

Use the HTML5 autofocus attribute, and focus on load for browsers
which don't support it.

Also change the removal of the "Where am I?" prompt to happen on
input rather than when the field is focused, so that it is properly
removed and restored when the field has been autofocused.

Fixes https://trac.openstreetmap.org/ticket/5065
---
 app/assets/javascripts/index.js        |  3 +++
 app/assets/javascripts/index/search.js | 12 +++++++-----
 app/views/layouts/_search.html.erb     |  2 +-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index a7522479e..d07c9797d 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -227,6 +227,9 @@ $(document).ready(function () {
     };
 
     page.load = function() {
+      if (!("autofocus" in document.createElement("input"))) {
+        $(".search_form input[name=query]").focus();
+      }
       return map.getState();
     };
 
diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index 3892d01a0..81b96635b 100644
--- a/app/assets/javascripts/index/search.js
+++ b/app/assets/javascripts/index/search.js
@@ -1,11 +1,12 @@
 OSM.Search = function(map) {
   $(".search_form input[name=query]")
-    .on("focus", function() {
-      $(".describe_location").fadeOut(100);
+    .on("input", function(e) {
+      if ($(e.target).val() == "") {
+        $(".describe_location").fadeIn(100);
+      } else {
+        $(".describe_location").fadeOut(100);
+      }
     })
-    .on("blur", function() {
-      $(".describe_location").fadeIn(100);
-    });
 
   $("#sidebar_content")
     .on("click", ".search_more a", clickSearchMore)
@@ -80,6 +81,7 @@ OSM.Search = function(map) {
     map.removeLayer(marker);
     map.removeObject();
     $(".search_form input[name=query]").val("");
+    $(".describe_location").fadeIn(100);
   };
 
   return page;
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index 1d054d5cd..55ce54219 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -1,7 +1,7 @@
 <%= form_tag search_path, :class => "search_form" do %>
   <%= submit_tag t('site.search.submit_text') %>
   <div class='query_wrapper'>
-    <input type="text" name="query" value="<%= params[:query] %>" placeholder="<%= t('site.search.search') %>">
+    <input type="text" name="query" value="<%= params[:query] %>" placeholder="<%= t('site.search.search') %>" autofocus>
     <%= link_to t('site.search.where_am_i'), '#', { :class => "describe_location", :title => t('site.search.where_am_i_title') } %>
   </div>
 <% end %>
-- 
2.43.2