diff --git a/app/assets/javascripts/app/views/header_view.js b/app/assets/javascripts/app/views/header_view.js
index 821ec468d..db55694cc 100644
--- a/app/assets/javascripts/app/views/header_view.js
+++ b/app/assets/javascripts/app/views/header_view.js
@@ -6,8 +6,8 @@ app.views.Header = app.views.Base.extend({
 
   events : {
     "click ul.dropdown li:first-child" : "toggleDropdown",
-    "focus #q": "toggleSearchActive",
-    "blur #q": "toggleSearchActive"
+    "focusin #q": "toggleSearchActive",
+    "focusout #q": "toggleSearchActive"
   },
 
   initialize : function(options) {
diff --git a/spec/javascripts/app/views/header_view_spec.js b/spec/javascripts/app/views/header_view_spec.js
index 39778c436..3b8d76ca0 100644
--- a/spec/javascripts/app/views/header_view_spec.js
+++ b/spec/javascripts/app/views/header_view_spec.js
@@ -83,7 +83,7 @@ describe("app.views.Header", function() {
 
     describe("focus", function() {
       it("adds the class 'active' when the user focuses the text field", function() {
-        input.trigger('focus');
+        input.trigger('focusin');
         waitsFor(function() {
           return input.is('.active');
         });
@@ -95,7 +95,7 @@ describe("app.views.Header", function() {
 
     describe("blur", function() {
       it("removes the class 'active' when the user blurs the text field", function() {
-        input.trigger('focus').trigger('blur');
+        input.trigger('focusin').trigger('focusout');
         expect(input).not.toHaveClass("active");
       });
     });