message_edit: Reinit topic input box typeahead in message edit UI.

This fixes an issue where the auto-complete dropdown doesn't reflect
the changed stream in the message edit UI.

We add an unlisten method to the typeahead library to support this
reinitialization cleanly and in a way that can be readily reused in
the future.

Fixes #19874.

static/js/message_edit.js

@@ -31,6 +31,7 @@ import * as rows from "./rows";
 import * as settings_data from "./settings_data";
 import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
+import * as sub_store from "./sub_store";
 import * as ui_report from "./ui_report";
 import * as upload from "./upload";
 
@@ -585,6 +586,17 @@ function edit_message(row, raw_content) {
         const is_stream_edited = is_stream_editable ? new_stream_id !== original_stream_id : false;
         message_edit_topic_propagate.toggle(is_topic_edited || is_stream_edited);
         message_edit_breadcrumb_messages.toggle(is_stream_edited);
+
+        if (is_stream_edited) {
+            /* Reinitialize the typeahead component with content for the new stream. */
+            const new_stream_name = sub_store.get(new_stream_id).name;
+            message_edit_topic.data("typeahead").unlisten();
+            composebox_typeahead.initialize_topic_edit_typeahead(
+                message_edit_topic,
+                new_stream_name,
+                true,
+            );
+        }
     }
 
     if (!message.locally_echoed) {

static/third/bootstrap-typeahead/typeahead.js

@@ -330,6 +330,15 @@
         .on('mouseenter', 'li', this.mouseenter.bind(this))
     }
 
+  , unlisten: function () {
+      this.$container.remove();
+      var events = ["blur", "keydown", "keyup", "keypress"];
+      for (var i=0; i<events.length; i++) {
+        this.$element.off(events[i]);
+      }
+      this.$element.removeData("typeahead");
+    }
+
   , eventSupported: function(eventName) {
       var isSupported = eventName in this.$element
       if (!isSupported) {