message-editing: Add autocomplete suggestions for topic editing.

We extends composebox_typeahead to support autocompletion
suggestions on editing the topic of a message from message
edit form as well as from recipient bar.

Tweaked by tabbott to have correct keyboard interaction without
needing to patch Bootstrap.

Fixes: #16368.

static/js/composebox_typeahead.js

@@ -990,6 +990,28 @@ export function compose_trigger_selection(event) {
     return false;
 }
 
+export function initialize_topic_edit_typeahead(form_field, stream_name, dropup) {
+    const options = {
+        fixed: true,
+        dropup,
+        highlighter(item) {
+            return typeahead_helper.render_typeahead_item({primary: item});
+        },
+        sorter(items) {
+            const sorted = typeahead_helper.sorter(this.query, items, (x) => x);
+            if (sorted.length > 0 && !sorted.includes(this.query)) {
+                sorted.unshift(this.query);
+            }
+            return sorted;
+        },
+        source() {
+            return topics_seen_for(stream_name);
+        },
+        items: 5,
+    };
+    form_field.typeahead(options);
+}
+
 function get_header_html() {
     let tip_text = "";
     switch (this.completing) {

static/js/message_edit.js

@@ -272,14 +272,18 @@ function handle_message_row_edit_keydown(e) {
                     composebox_typeahead.handle_enter($(e.target), e);
                     return;
                 }
+            } else if ($(".typeahead:visible").length > 0) {
+                // Accepting typeahead is handled by the typeahead library.
+                return;
             } else if (
                 $(e.target).hasClass("message_edit_topic") ||
                 $(e.target).hasClass("message_edit_topic_propagate")
             ) {
+                // Enter should save the topic edit, as long as it's
+                // not being used to accept typeahead.
                 const row = $(e.target).closest(".message_row");
                 save_message_row_edit(row);
                 e.stopPropagation();
-                e.preventDefault();
             }
             return;
         case "Escape": // Handle escape keys in the message_edit form.
@@ -296,6 +300,11 @@ function handle_inline_topic_edit_keydown(e) {
     let row;
     switch (e.key) {
         case "Enter": // Handle Enter key in the recipient bar/inline topic edit form
+            if ($(".typeahead:visible").length > 0) {
+                // Accepting typeahead should not trigger a save.
+                e.preventDefault();
+                return;
+            }
             row = $(e.target).closest(".recipient_row");
             save_inline_topic_edit(row);
             e.stopPropagation();
@@ -561,6 +570,7 @@ function edit_message(row, raw_content) {
             set_propagate_selector_display();
         });
     }
+    composebox_typeahead.initialize_topic_edit_typeahead(message_edit_topic, message.stream, true);
 }
 
 function start_edit_maintaining_scroll(row, content) {
@@ -641,7 +651,13 @@ export function start_inline_topic_edit(recipient_row) {
     if (topic === compose.empty_topic_placeholder()) {
         topic = "";
     }
-    form.find(".inline_topic_edit").val(topic).trigger("select").trigger("focus");
+    const inline_topic_edit_input = form.find(".inline_topic_edit");
+    inline_topic_edit_input.val(topic).trigger("select").trigger("focus");
+    composebox_typeahead.initialize_topic_edit_typeahead(
+        inline_topic_edit_input,
+        message.stream,
+        false,
+    );
 }
 
 export function is_editing(id) {
@@ -685,6 +701,8 @@ export function end_message_row_edit(row) {
     // We have to blur out text fields, or else hotkeys.js
     // thinks we are still editing.
     row.find(".message_edit").trigger("blur");
+    // We should hide the editing typeahead if it is visible
+    row.find("input.message_edit_topic").trigger("blur");
 }
 
 export function save_inline_topic_edit(row) {

static/templates/message_edit_form.hbs

@@ -17,7 +17,7 @@
                     {{/each}}
                 </select>
                 <i class="fa fa-angle-right" aria-hidden="true" {{#unless is_stream_editable}}style="display:none"{{/unless}}></i>
-                <input type="text" placeholder="{{topic}}" value="{{topic}}" class="message_edit_topic" id="message_edit_topic" />
+                <input type="text" placeholder="{{topic}}" value="{{topic}}" class="message_edit_topic" id="message_edit_topic" autocomplete="off" />
                 <div class="message_edit_breadcrumb_messages"  style='display:none;'>
                     <label class="checkbox">
                         <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />