diff --git a/frontend_tests/node_tests/search.js b/frontend_tests/node_tests/search.js
index 1c3bea6508..0c7fa76641 100644
--- a/frontend_tests/node_tests/search.js
+++ b/frontend_tests/node_tests/search.js
@@ -78,6 +78,7 @@ run_test('initialize', () => {
     const search_query_box = $('#search_query');
     const searchbox_form = $('#searchbox_form');
     const search_button = $('.search_button');
+    const searchbox = $('#searchbox');
 
     searchbox_form.on = (event, func) => {
         assert.equal(event, 'compositionend');
@@ -182,7 +183,6 @@ run_test('initialize', () => {
 
             search.is_using_input_method = true;
             _setup('stream:Verona');
-            search_query_box.is = return_true;
 
             assert.equal(opts.updater('stream:Verona'), 'stream:Verona');
             assert(!is_blurred);
@@ -290,6 +290,18 @@ run_test('initialize', () => {
         }
     };
 
+    searchbox.on = (event, callback) => {
+        if (event === 'focusin') {
+            searchbox.css({"box-shadow": "unset"});
+            callback();
+            assert.deepEqual(searchbox.css(), {"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"});
+        } else if (event === 'focusout') {
+            searchbox.css({"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"});
+            callback();
+            assert.deepEqual(searchbox.css(), {"box-shadow": "unset"});
+        }
+    };
+
     search.initialize();
 });
 
diff --git a/frontend_tests/node_tests/search_legacy.js b/frontend_tests/node_tests/search_legacy.js
index 2d1841ca54..72c1c54ae7 100644
--- a/frontend_tests/node_tests/search_legacy.js
+++ b/frontend_tests/node_tests/search_legacy.js
@@ -9,7 +9,7 @@ const return_true = () => true;
 const return_false = () => false;
 
 set_global('$', global.make_zjquery());
-set_global('narrow_state', {filter: return_false});
+set_global('narrow_state', {});
 set_global('search_suggestion', {});
 set_global('ui_util', {
     change_tab_to: noop,
diff --git a/static/js/search.js b/static/js/search.js
index e473478e9f..ec56512aaf 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -91,15 +91,7 @@ exports.initialize = function () {
             if (page_params.search_pills_enabled) {
                 search_pill.append_search_string(search_string,
                                                  search_pill_widget.widget);
-                if (search_query_box.is(':focus')) {
-                    // We usually allow the user to continue
-                    // typing until the enter key is pressed.
-                    // But we narrow when the user clicks on a
-                    // typeahead suggestion. This change in behaviour
-                    // is a workaround to be able to display the
-                    // navbar every time search_query_box loses focus.
-                    return search_query_box.val();
-                }
+                return search_query_box.val();
             }
             return exports.narrow_or_search_for_term(search_string);
         },
@@ -175,7 +167,7 @@ exports.initialize = function () {
         // selecting something in the typeahead menu causes
         // the box to lose focus a moment before.
         //
-        // The workaround is to check 300ms later -- long
+        // The workaround is to check 100ms later -- long
         // enough for the search to have gone through, but
         // short enough that the user won't notice (though
         // really it would be OK if they did).
@@ -194,10 +186,18 @@ exports.initialize = function () {
         }
         setTimeout(() => {
             exports.update_button_visibility();
+        }, 100);
+    });
+
+    if (page_params.search_pills_enabled) {
+        // Uses jquery instead of pure css as the `:focus` event occurs on `#search_query`,
+        // while we want to add box-shadow to `#searchbox`. This could have been done
+        // with `:focus-within` CSS selector, but it is not supported in IE or Opera.
+        searchbox.on('focusout', function () {
             tab_bar.close_search_bar_and_open_narrow_description();
             searchbox.css({"box-shadow": "unset"});
-        }, 300);
-    });
+        });
+    }
 };
 
 exports.focus_search = function () {