compose: Handle topic-box focus and blur.

web/src/compose_recipient.ts

@@ -348,7 +348,10 @@ export function initialize(): void {
     $("#private_message_recipient").on("input", restore_placeholder_in_firefox_for_no_input);
 }
 
-export function update_topic_displayed_text(topic_name: string | undefined): void {
+export function update_topic_displayed_text(
+    topic_name: string | undefined,
+    has_topic_focus = false,
+): void {
     if (topic_name === undefined) {
         topic_name = "";
     }
@@ -366,7 +369,7 @@ export function update_topic_displayed_text(topic_name: string | undefined): voi
     // Remove any stale references to the empty topic display
     $input.removeClass("empty-topic-display");
 
-    if (is_empty_string_topic) {
+    if (is_empty_string_topic && !has_topic_focus) {
         topic_placeholder_text = util.get_final_topic_display_name("");
         $input.addClass("empty-topic-display");
     }

web/src/compose_setup.js

@@ -604,7 +604,14 @@ export function initialize() {
     });
 
     $("input#stream_message_recipient_topic").on("focus", () => {
+        const $input = $("input#stream_message_recipient_topic");
+        compose_recipient.update_topic_displayed_text($input.val(), true);
         compose_recipient.update_compose_area_placeholder_text();
+
+        $("input#stream_message_recipient_topic").one("blur", () => {
+            compose_recipient.update_topic_displayed_text($input.val());
+            compose_recipient.update_compose_area_placeholder_text();
+        });
     });
 
     $("input#stream_message_recipient_topic").on("input", () => {

web/styles/compose.css

@@ -1092,7 +1092,7 @@ textarea.new_message_textarea {
         }
     }
 
-    #stream_message_recipient_topic:placeholder-shown
+    #stream_message_recipient_topic:not(.empty-topic-display):placeholder-shown
         + #recipient_box_clear_topic_button {
         visibility: hidden;
     }