diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index 38504d046d..19750b4809 100644
--- a/web/src/message_edit.ts
+++ b/web/src/message_edit.ts
@@ -477,6 +477,15 @@ function handle_inline_topic_edit_change(this: HTMLInputElement): void {
         // the error. So, we re-enable the save button and remove the tooltip.
         ui_util.enable_element_and_remove_tooltip($topic_edit_save_button);
     }
+
+    if (!realm.realm_mandatory_topics) {
+        const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
+        if ($inline_topic_edit_input.val() === "") {
+            $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+        } else {
+            $topic_not_mandatory_placeholder.removeClass("inline-topic-edit-placeholder-visible");
+        }
+    }
 }
 
 function timer_text(seconds_left: number): string {
@@ -935,7 +944,6 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
     const $form = $(
         render_topic_edit_form({
             max_topic_length: realm.max_topic_length,
-            realm_mandatory_topics: realm.realm_mandatory_topics,
             empty_string_topic_display_name: util.get_final_topic_display_name(""),
         }),
     );
@@ -957,6 +965,32 @@ export function start_inline_topic_edit($recipient_row: JQuery): void {
     $form.on("keydown", handle_inline_topic_edit_keydown);
 
     $inline_topic_edit_input.on("input", handle_inline_topic_edit_change);
+
+    if (!realm.realm_mandatory_topics) {
+        const $topic_not_mandatory_placeholder = $(".inline-topic-edit-placeholder");
+
+        if (topic === "") {
+            $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+        }
+
+        $inline_topic_edit_input.on("blur", () => {
+            if ($inline_topic_edit_input.val() === "") {
+                $topic_not_mandatory_placeholder.removeClass(
+                    "inline-topic-edit-placeholder-visible",
+                );
+                $inline_topic_edit_input.attr("placeholder", util.get_final_topic_display_name(""));
+                $inline_topic_edit_input.addClass("empty-topic-display");
+            }
+        });
+
+        $inline_topic_edit_input.on("focus", () => {
+            if ($inline_topic_edit_input.val() === "") {
+                $inline_topic_edit_input.attr("placeholder", "");
+                $inline_topic_edit_input.removeClass("empty-topic-display");
+                $topic_not_mandatory_placeholder.addClass("inline-topic-edit-placeholder-visible");
+            }
+        });
+    }
 }
 
 export function end_inline_topic_edit($row: JQuery): void {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 8b73e4e683..fbd590cc61 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -953,6 +953,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
     gap: 5px;
     margin: 0;
     padding-right: 5px;
+    position: relative;
 }
 
 .inline_topic_edit {
@@ -977,6 +978,25 @@ div.focused-message-list.is-conversation-view .recipient_row {
             inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
             0 0 8px hsl(206deg 80% 62% / 60%);
     }
+
+    &.empty-topic-display::placeholder {
+        color: inherit;
+    }
+}
+
+.inline-topic-edit-placeholder {
+    position: absolute;
+    left: 5px;
+    max-width: 65%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.inline-topic-edit-placeholder-visible {
+    visibility: visible;
 }
 
 .topic_edit_save {
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index ee6a69dcda..5301fb711a 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -58,10 +58,7 @@
                             <div id="compose_recipient_box">
                                 <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
                                 <span id="topic-not-mandatory-placeholder" class="placeholder">
-                                    {{#tr}}
-                                        Enter a topic (skip for <z-empty-string-topic-display-name></z-empty-string-topic-display-name>)
-                                        {{#*inline "z-empty-string-topic-display-name"}}<span class="empty-topic-display">{{empty_string_topic_display_name}}</span>{{/inline}}
-                                    {{/tr}}
+                                    {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
                                 </span>
                                 <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
                                     <i class="zulip-icon zulip-icon-close"></i>
diff --git a/web/templates/topic_edit_form.hbs b/web/templates/topic_edit_form.hbs
index 033da41478..14e9785a05 100644
--- a/web/templates/topic_edit_form.hbs
+++ b/web/templates/topic_edit_form.hbs
@@ -1,9 +1,10 @@
 {{! Client-side Handlebars template for rendering the topic edit form. }}
 
 <form class="topic_edit_form">
-    <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
-      class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
-      {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
+    <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}" class="inline_topic_edit header-v"/>
+    <span class="inline-topic-edit-placeholder placeholder">
+        {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
+    </span>
     {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" attention="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
     {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" attention="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
     <div class="topic_edit_spinner"></div>
diff --git a/web/templates/topic_not_mandatory_placeholder_text.hbs b/web/templates/topic_not_mandatory_placeholder_text.hbs
new file mode 100644
index 0000000000..ac5de58eed
--- /dev/null
+++ b/web/templates/topic_not_mandatory_placeholder_text.hbs
@@ -0,0 +1,4 @@
+{{#tr}}
+    Enter a topic (skip for <z-empty-string-topic-display-name></z-empty-string-topic-display-name>)
+    {{#*inline "z-empty-string-topic-display-name"}}<span class="empty-topic-display">{{empty_string_topic_display_name}}</span>{{/inline}}
+{{/tr}}