From 9fc6793809a8d696ba0cf9d71922abf9d8cf4cf8 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Sun, 24 Mar 2024 20:33:14 -0700
Subject: [PATCH] typeahead: Pass query to highlighter_html instead of using
 hacky this.

---
 web/src/bootstrap_typeahead.ts   |  6 +++---
 web/src/pill_typeahead.js        |  4 ++--
 web/tests/pill_typeahead.test.js | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts
index 49e798a40d..73b7aa9354 100644
--- a/web/src/bootstrap_typeahead.ts
+++ b/web/src/bootstrap_typeahead.ts
@@ -193,7 +193,7 @@ class Typeahead<ItemType extends string | object> {
     items: number;
     matcher: (item: ItemType, query: string) => boolean;
     sorter: (items: ItemType[]) => ItemType[];
-    highlighter_html: (item: ItemType) => string | undefined;
+    highlighter_html: (item: ItemType, query: string) => string | undefined;
     updater: (
         item: ItemType,
         event?: JQuery.ClickEvent | JQuery.KeyUpEvent | JQuery.KeyDownEvent,
@@ -404,7 +404,7 @@ class Typeahead<ItemType extends string | object> {
     render(final_items: ItemType[], matching_items: ItemType[]): this {
         const $items: JQuery[] = final_items.map((item) => {
             const $i = $(ITEM_HTML).data("typeahead-value", item);
-            const item_html = this.highlighter_html(item) ?? "";
+            const item_html = this.highlighter_html(item, this.query) ?? "";
             const $item_html = $i.find("a").html(item_html);
 
             const option_label_html = this.option_label(matching_items, item);
@@ -688,7 +688,7 @@ class Typeahead<ItemType extends string | object> {
  * =========================== */
 
 type TypeaheadOptions<ItemType> = {
-    highlighter_html: (item: ItemType) => string | undefined;
+    highlighter_html: (item: ItemType, query: string) => string | undefined;
     items: number;
     source: (query: string) => ItemType[];
     // optional options
diff --git a/web/src/pill_typeahead.js b/web/src/pill_typeahead.js
index 966741b49f..e64164ec67 100644
--- a/web/src/pill_typeahead.js
+++ b/web/src/pill_typeahead.js
@@ -65,8 +65,8 @@ export function set_up($input, pills, opts) {
             }
             return source;
         },
-        highlighter_html(item) {
-            if (include_streams(this.query)) {
+        highlighter_html(item, query) {
+            if (include_streams(query)) {
                 return typeahead_helper.render_stream(item);
             }
 
diff --git a/web/tests/pill_typeahead.test.js b/web/tests/pill_typeahead.test.js
index 83b95d40c5..d13073e5c8 100644
--- a/web/tests/pill_typeahead.test.js
+++ b/web/tests/pill_typeahead.test.js
@@ -160,7 +160,7 @@ run_test("set_up", ({mock_template, override}) => {
             if (opts.stream) {
                 // Test stream highlighter_html for widgets that allow stream pills.
                 assert.equal(
-                    config.highlighter_html.call(fake_stream_this, denmark),
+                    config.highlighter_html(denmark, fake_stream_this.query),
                     $fake_rendered_stream,
                 );
             }
@@ -168,23 +168,23 @@ run_test("set_up", ({mock_template, override}) => {
                 // If user is also allowed along with user_group
                 // then we should check that each of them rendered correctly.
                 assert.equal(
-                    config.highlighter_html.call(fake_group_this, testers),
+                    config.highlighter_html(testers, fake_group_this.query),
                     $fake_rendered_group,
                 );
                 assert.equal(
-                    config.highlighter_html.call(fake_person_this, me),
+                    config.highlighter_html(me, fake_person_this.query),
                     $fake_rendered_person,
                 );
             }
             if (opts.user && !opts.user_group) {
                 assert.equal(
-                    config.highlighter_html.call(fake_person_this, me),
+                    config.highlighter_html(me, fake_person_this.query),
                     $fake_rendered_person,
                 );
             }
             if (!opts.user && opts.user_group) {
                 assert.equal(
-                    config.highlighter_html.call(fake_group_this, testers),
+                    config.highlighter_html(testers, fake_group_this.query),
                     $fake_rendered_group,
                 );
             }