From 122d93d43041a807c604d8a19847585262eef1b5 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Mon, 21 Jul 2025 22:50:31 +0530
Subject: [PATCH] filter_input: Add explicit classname for filter clear button.

This commit adds an explicit "input-close-filter-button" classname to
the filter input clear button, improving the readability of the code.
---
 web/src/click_handlers.ts                  | 6 +++++-
 web/src/inputs.ts                          | 2 +-
 web/src/stream_list.ts                     | 2 +-
 web/src/user_search.ts                     | 2 +-
 web/styles/inputs.css                      | 4 ++--
 web/templates/components/input_wrapper.hbs | 6 +++++-
 web/tests/user_search.test.cjs             | 4 ++--
 7 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/click_handlers.ts b/web/src/click_handlers.ts
index 68828d39a1..146c36ed0c 100644
--- a/web/src/click_handlers.ts
+++ b/web/src/click_handlers.ts
@@ -824,7 +824,11 @@ export function initialize(): void {
 
     // LEFT SIDEBAR
 
-    $("body").on("click", ".filter-topics .input-button", topic_list.clear_topic_search);
+    $("body").on(
+        "click",
+        ".filter-topics .input-close-filter-button",
+        topic_list.clear_topic_search,
+    );
 
     $(".streams_filter_icon").on("click", (e) => {
         e.stopPropagation();
diff --git a/web/src/inputs.ts b/web/src/inputs.ts
index d14c2456ca..9387af8005 100644
--- a/web/src/inputs.ts
+++ b/web/src/inputs.ts
@@ -2,7 +2,7 @@ import $ from "jquery";
 
 $("body").on(
     "click",
-    ".filter-input .input-button",
+    ".filter-input .input-close-filter-button",
     function (this: HTMLElement, _e: JQuery.Event) {
         const $input = $(this).prev(".input-element");
         $input.val("").trigger("input");
diff --git a/web/src/stream_list.ts b/web/src/stream_list.ts
index e5afa7e486..312a0d98d2 100644
--- a/web/src/stream_list.ts
+++ b/web/src/stream_list.ts
@@ -1063,7 +1063,7 @@ export function set_event_handlers({
             e.preventDefault();
             if (
                 e.target.id === "streams_inline_icon" ||
-                $(e.target).parent().hasClass("input-button")
+                $(e.target).parent().hasClass("input-close-filter-button")
             ) {
                 return;
             }
diff --git a/web/src/user_search.ts b/web/src/user_search.ts
index cfff03ab08..a3287cec8f 100644
--- a/web/src/user_search.ts
+++ b/web/src/user_search.ts
@@ -21,7 +21,7 @@ export class UserSearch {
         this._update_list = opts.update_list;
         this._on_focus = opts.on_focus;
 
-        $("#userlist-header-search .input-button").on("click", () => {
+        $("#userlist-header-search .input-close-filter-button").on("click", () => {
             this.clear_search();
         });
 
diff --git a/web/styles/inputs.css b/web/styles/inputs.css
index 5ba185c070..545492f142 100644
--- a/web/styles/inputs.css
+++ b/web/styles/inputs.css
@@ -120,7 +120,7 @@
             the right padding to compensate for the same. */
             padding-right: 0.5em;
 
-            ~ .input-button {
+            ~ .input-close-filter-button {
                 visibility: hidden;
             }
         }
@@ -137,7 +137,7 @@
                 padding-right: 0.5em;
             }
 
-            .input-button {
+            .input-close-filter-button {
                 visibility: hidden;
             }
         }
diff --git a/web/templates/components/input_wrapper.hbs b/web/templates/components/input_wrapper.hbs
index 99a4a2bb7d..75b1b032c4 100644
--- a/web/templates/components/input_wrapper.hbs
+++ b/web/templates/components/input_wrapper.hbs
@@ -4,6 +4,10 @@
     {{/if}}
     {{> @partial-block .}}
     {{#if input_button_icon}}
-        {{> icon_button custom_classes="input-button" squared=true icon=input_button_icon intent="neutral" }}
+        {{#if (eq input_type "filter-input") }}
+            {{> icon_button custom_classes="input-button input-close-filter-button" squared=true icon=input_button_icon intent="neutral" }}
+        {{else}}
+            {{> icon_button custom_classes="input-button" squared=true icon=input_button_icon intent="neutral" }}
+        {{/if}}
     {{/if}}
 </div>
diff --git a/web/tests/user_search.test.cjs b/web/tests/user_search.test.cjs
index 955b62ca27..837463f0b4 100644
--- a/web/tests/user_search.test.cjs
+++ b/web/tests/user_search.test.cjs
@@ -114,9 +114,9 @@ test("clear_search with button", ({override}) => {
     override(fake_buddy_list, "populate", (user_ids) => {
         assert.deepEqual(user_ids, {all_user_ids: ordered_user_ids});
     });
-    $("#userlist-header-search .input-button").trigger("click");
+    $("#userlist-header-search .input-close-filter-button").trigger("click");
     assert.equal($("input.user-list-filter").val(), "");
-    $("#userlist-header-search .input-button").trigger("click");
+    $("#userlist-header-search .input-close-filter-button").trigger("click");
 });
 
 test("clear_search", ({override}) => {