From 531a803bfc965b594f1ca9186febd17bf891637b Mon Sep 17 00:00:00 2001
From: Ryan Rehman <ryanrehman99@gmail.com>
Date: Tue, 9 Jun 2020 16:29:12 +0530
Subject: [PATCH] typeahead: Allow automated selection for `contenteditable`
 elements.

This adds the support of our auto completion behaviour of the legacy
search code into the search pills version.
---
 frontend_tests/node_tests/search.js           |  2 ++
 static/js/search.js                           |  7 +++++++
 static/third/bootstrap-typeahead/typeahead.js | 20 +++++++++++++++----
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend_tests/node_tests/search.js b/frontend_tests/node_tests/search.js
index 7637c3ae18..cb9acc73ff 100644
--- a/frontend_tests/node_tests/search.js
+++ b/frontend_tests/node_tests/search.js
@@ -16,6 +16,7 @@ set_global('narrow_state', {filter: return_false});
 set_global('search_suggestion', {});
 set_global('ui_util', {
     change_tab_to: noop,
+    place_caret_at_end: noop,
 });
 set_global('narrow', {});
 
@@ -94,6 +95,7 @@ run_test('initialize', () => {
         assert.equal(opts.naturalSearch, true);
         assert.equal(opts.helpOnEmptyStrings, true);
         assert.equal(opts.matcher(), true);
+        assert.equal(opts.on_move(), true);
 
         {
             const search_suggestions = {
diff --git a/static/js/search.js b/static/js/search.js
index df500386bc..40096388d6 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -103,6 +103,12 @@ exports.initialize = function () {
         stopAdvance: page_params.search_pills_enabled,
         advanceKeyCodes: [8],
 
+        on_move: function () {
+            if (page_params.search_pills_enabled) {
+                ui_util.place_caret_at_end(search_query_box[0]);
+                return true;
+            }
+        },
         // Use our custom typeahead `on_escape` hook to exit
         // the search bar as soon as the user hits Esc.
         on_escape: tab_bar.exit_search,
@@ -195,6 +201,7 @@ exports.initiate_search = function () {
     $('#search_query').typeahead('lookup').select();
     if (page_params.search_pills_enabled) {
         $('#search_query').focus();
+        ui_util.place_caret_at_end($('#search_query')[0]);
     }
 };
 
diff --git a/static/third/bootstrap-typeahead/typeahead.js b/static/third/bootstrap-typeahead/typeahead.js
index 5a8e6a2e55..90f0c2907f 100644
--- a/static/third/bootstrap-typeahead/typeahead.js
+++ b/static/third/bootstrap-typeahead/typeahead.js
@@ -28,6 +28,7 @@
  *   choice.
  *
  *   Our custom changes include all mentions of this.automated.
+ *   And also includes the blocks containing the is contenteditable condition.
  *
  * 2. Custom selection triggers:
  *
@@ -81,6 +82,7 @@
     this.fixed = this.options.fixed || false;
     this.automated = this.options.automated || this.automated;
     this.trigger_selection = this.options.trigger_selection || this.trigger_selection;
+    this.on_move = this.options.on_move;
     this.on_escape = this.options.on_escape;
     this.header = this.options.header || this.header;
 
@@ -99,15 +101,25 @@
 
   , select: function (e) {
       var val = this.$menu.find('.active').data('typeahead-value')
-      this.$element
-        .val(this.updater(val, e))
-        .change()
+      if (this.$element.is("[contenteditable]")) {
+        this.$element.html(this.updater(val, e)).change();
+        // Empty textContent after the change event handler
+        // converts the input text to html elements.
+        this.$element.html('');
+      } else {
+        this.$element.val(this.updater(val, e)).change();
+      }
+
       return this.hide()
     }
 
   , set_value: function () {
       var val = this.$menu.find('.active').data('typeahead-value')
-      this.$element.val(val)
+      this.$element.is("[contenteditable]") ? this.$element.html(val) : this.$element.val(val);
+
+      if (this.on_move) {
+        this.on_move();
+      }
     }
 
   , updater: function (item) {