search: Refactor how close buttons are handled.

We refactor the following inputs to use a `placeholder-shown` CSS selector to
show/hide the close button, rather than custom JS logic:
- Filter topics field in the left sidebar
- Filter direct messages field under direct messages
- Stream message topic

web/src/compose_actions.ts

@@ -374,13 +374,6 @@ export function start(raw_opts: ComposeActionsStartOpts): void {
         drafts.set_compose_draft_id(opts.draft_id);
     }
 
-    const $clear_topic_button = $("#recipient_box_clear_topic_button");
-    if (is_clear_topic_button_triggered || opts.topic.length === 0) {
-        $clear_topic_button.hide();
-    } else {
-        $clear_topic_button.show();
-    }
-
     // Show a warning if topic is resolved
     compose_validate.warn_if_topic_resolved(true);
     // Show a warning if the user is in a search narrow when replying to a message

web/src/compose_setup.js

@@ -512,21 +512,8 @@ export function initialize() {
 
     $("#compose_recipient_box").on("click", "#recipient_box_clear_topic_button", () => {
         const $input = $("input#stream_message_recipient_topic");
-        const $button = $("#recipient_box_clear_topic_button");
-
         $input.val("");
         $input.trigger("focus");
-        $button.hide();
-    });
-
-    $("#compose_recipient_box").on("input", "input#stream_message_recipient_topic", (e) => {
-        const $button = $("#recipient_box_clear_topic_button");
-        const value = $(e.target).val();
-        if (value.length === 0) {
-            $button.hide();
-        } else {
-            $button.show();
-        }
     });
 
     $("input#stream_message_recipient_topic").on("focus", () => {

web/src/pm_list.ts

@@ -62,11 +62,6 @@ export function _build_direct_messages_list(): vdom.Tag<PMNode> {
     }
     const dom_ast = pm_list_dom.pm_ul(pm_list_nodes);
 
-    if (search_term === "") {
-        $("#clear-direct-messages-search-button").hide();
-    } else {
-        $("#clear-direct-messages-search-button").show();
-    }
     return dom_ast;
 }
 

web/src/stream_list.ts

@@ -407,7 +407,6 @@ export function zoom_in_topics(options: {stream_id: number | undefined}): void {
             // Add search box for topics list.
             $elt.children("div.bottom_left_row").append($(render_filter_topics()));
             $("#filter-topic-input").trigger("focus");
-            $("#clear_search_topic_button").hide();
         } else {
             $elt.hide();
         }

web/src/topic_list.ts

@@ -222,12 +222,6 @@ export class TopicListWidget {
         vdom.update(replace_content, find, new_dom, this.prior_dom);
 
         this.prior_dom = new_dom;
-
-        if ($("#filter-topic-input").val() !== "") {
-            $("#clear_search_topic_button").show();
-        } else {
-            $("#clear_search_topic_button").hide();
-        }
     }
 }
 

web/styles/compose.css

@@ -960,6 +960,10 @@ textarea.new_message_textarea {
         }
     }
 
+    #stream_message_recipient_topic:placeholder-shown
+        + #recipient_box_clear_topic_button {
+        display: none;
+    }
     /* This will reset the bootstrap margin-bottom: 10px value for the inputs */
     & input {
         margin-bottom: 0;

web/styles/left_sidebar.css

@@ -1000,6 +1000,10 @@ li.top_left_scheduled_messages {
     grid-area: row-content;
 }
 
+#filter-topic-input:placeholder-shown + #clear_search_topic_button {
+    display: none;
+}
+
 .searching-for-more-topics img {
     height: 16px;
     grid-area: row-content;
@@ -1439,6 +1443,11 @@ li.topic-list-item {
            to make a generous clickable area. */
         padding: 0;
     }
+
+    .direct-messages-list-filter:placeholder-shown
+        + #clear-direct-messages-search-button {
+        display: none;
+    }
 }
 
 /* Prepare an adjusted grid for the logged-out state,