search: Close search box when searching for an empty string.

Previously clearing the search box and pressing enter would
redirect the user to All Messages. This commit changes the
behavior so that the search bar closes with no other effects.

More discussion on this on CZO here:
https://chat.zulip.org/#narrow/stream/101-design/topic/recent.20conversations.20for.20streams/near/1621501
This commit is contained in:
evykassirer 2023-08-19 21:02:43 -07:00 committed by Tim Abbott
parent ac14a8bcf5
commit dec49883d4
2 changed files with 14 additions and 6 deletions

View File

@ -12,6 +12,10 @@ import * as search_suggestion from "./search_suggestion";
export let is_using_input_method = false; export let is_using_input_method = false;
export function narrow_or_search_for_term(search_string, {on_narrow_search}) { export function narrow_or_search_for_term(search_string, {on_narrow_search}) {
if (search_string === "") {
exit_search({keep_search_narrow_open: true});
return "";
}
const $search_query_box = $("#search_query"); const $search_query_box = $("#search_query");
if (is_using_input_method) { if (is_using_input_method) {
// Neither narrow nor search when using input tools as // Neither narrow nor search when using input tools as
@ -72,7 +76,7 @@ export function initialize({on_narrow_search}) {
// Use our custom typeahead `on_escape` hook to exit // Use our custom typeahead `on_escape` hook to exit
// the search bar as soon as the user hits Esc. // the search bar as soon as the user hits Esc.
on_escape: exit_search, on_escape: () => exit_search({keep_search_narrow_open: false}),
tabIsEnter: false, tabIsEnter: false,
openInputFieldOnKeyUp() { openInputFieldOnKeyUp() {
if ($(".navbar-search.expanded").length === 0) { if ($(".navbar-search.expanded").length === 0) {
@ -150,7 +154,7 @@ export function initialize({on_narrow_search}) {
// register searchbar click handler // register searchbar click handler
$("#search_exit").on("click", (e) => { $("#search_exit").on("click", (e) => {
popovers.hide_all(); popovers.hide_all();
exit_search(); exit_search({keep_search_narrow_open: false});
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
@ -167,7 +171,7 @@ export function initialize({on_narrow_search}) {
$("#search_exit").on("keydown", (e) => { $("#search_exit").on("keydown", (e) => {
if (e.key === "tab") { if (e.key === "tab") {
popovers.hide_all(); popovers.hide_all();
exit_search(); exit_search({keep_search_narrow_open: false});
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
@ -209,13 +213,16 @@ function reset_searchbox_text() {
$("#search_query").val(get_initial_search_string()); $("#search_query").val(get_initial_search_string());
} }
function exit_search() { function exit_search(opts) {
const filter = narrow_state.filter(); const filter = narrow_state.filter();
if (!filter || filter.is_common_narrow()) { if (!filter || filter.is_common_narrow()) {
// for common narrows, we change the UI (and don't redirect) // for common narrows, we change the UI (and don't redirect)
close_search_bar_and_open_narrow_description(); close_search_bar_and_open_narrow_description();
} else if (opts.keep_search_narrow_open) {
// If the user is in a search narrow and we don't want to redirect,
// we just keep the search bar open and don't do anything.
return;
} else { } else {
// for "searching narrows", we redirect
window.location.href = filter.generate_redirect_url(); window.location.href = filter.generate_redirect_url();
} }
$("#search_query").trigger("blur"); $("#search_query").trigger("blur");

View File

@ -27,7 +27,7 @@ run_test("clear_search_form", () => {
assert.equal($("#search_query").val(), ""); assert.equal($("#search_query").val(), "");
}); });
run_test("initialize", ({mock_template}) => { run_test("initialize", ({override_rewire, mock_template}) => {
const $search_query_box = $("#search_query"); const $search_query_box = $("#search_query");
const $searchbox_form = $("#searchbox_form"); const $searchbox_form = $("#searchbox_form");
@ -294,6 +294,7 @@ run_test("initialize", ({mock_template}) => {
assert.ok(!is_blurred); assert.ok(!is_blurred);
override_rewire(search, "exit_search", () => {});
ev.key = "Enter"; ev.key = "Enter";
$search_query_box.is = () => true; $search_query_box.is = () => true;
$searchbox_form.trigger(ev); $searchbox_form.trigger(ev);