From c3c8bad0de5fc62ee4e1df2fe8c451fd9a5615a8 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Thu, 18 Aug 2022 00:53:47 +0530
Subject: [PATCH] typeahead: Highlight only matching word prefixes in search
 suggestions.

Earlier mid word parts matching with the search query were also
highlighted (made bold), but since actual matching for showing search
suggestions is based on prefix matching, this highlighting logic is
now made to be in sync with the search suggestions matching logic.
---
 web/src/typeahead_helper.js        | 14 +++++++++++---
 web/tests/typeahead_helper.test.js |  6 ++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/web/src/typeahead_helper.js b/web/src/typeahead_helper.js
index 4a71004c6a..07788e71b9 100644
--- a/web/src/typeahead_helper.js
+++ b/web/src/typeahead_helper.js
@@ -29,16 +29,24 @@ export function build_highlight_regex(query) {
 }
 
 export function highlight_with_escaping_and_regex(regex, item) {
+    // if regex is empty return entire item highlighted and escaped
+    if (regex.source === "()") {
+        return "<strong>" + Handlebars.Utils.escapeExpression(item) + "</strong>";
+    }
+
     // We need to assemble this manually (as opposed to doing 'join') because we need to
     // (1) escape all the pieces and (2) the regex is case-insensitive, and we need
     // to know the case of the content we're replacing (you can't just use a bolded
     // version of 'query')
 
-    const pieces = item.split(regex);
+    const pieces = item.split(regex).filter(Boolean);
     let result = "";
 
-    for (const piece of pieces) {
-        if (regex.test(piece)) {
+    for (let i = 0; i < pieces.length; i += 1) {
+        const piece = pieces[i];
+        if (regex.test(piece) && (i === 0 || pieces[i - 1].endsWith(" "))) {
+            // only highlight if the matching part is a word prefix, ie
+            // if it is the 1st piece or if there was a space before it
             result += "<strong>" + Handlebars.Utils.escapeExpression(piece) + "</strong>";
         } else {
             result += Handlebars.Utils.escapeExpression(piece);
diff --git a/web/tests/typeahead_helper.test.js b/web/tests/typeahead_helper.test.js
index b4e10e7a75..4726e303bd 100644
--- a/web/tests/typeahead_helper.test.js
+++ b/web/tests/typeahead_helper.test.js
@@ -671,6 +671,12 @@ test("highlight_with_escaping", () => {
     expected = "<strong>development h</strong>elp";
     result = highlight(query, item);
     assert.equal(result, expected);
+
+    item = "Prefix notprefix prefix";
+    query = "pre";
+    expected = "<strong>Pre</strong>fix notprefix <strong>pre</strong>fix";
+    result = highlight(query, item);
+    assert.equal(result, expected);
 });
 
 test("render_person when emails hidden", ({mock_template}) => {