typeahead: Pass query to matcher instead of using hacky this.

web/src/bootstrap_typeahead.ts

@@ -191,7 +191,7 @@ type InputElement =
 class Typeahead<ItemType extends string | object> {
     input_element: InputElement;
     items: number;
-    matcher: (item: ItemType) => boolean;
+    matcher: (item: ItemType, query: string) => boolean;
     sorter: (items: ItemType[]) => ItemType[];
     highlighter_html: (item: ItemType) => string | undefined;
     updater: (
@@ -232,7 +232,7 @@ class Typeahead<ItemType extends string | object> {
             assert(!this.input_element.$element.is("[contenteditable]"));
         }
         this.items = options.items ?? 8;
-        this.matcher = options.matcher ?? ((item) => this.defaultMatcher(item));
+        this.matcher = options.matcher ?? ((item, query) => this.defaultMatcher(item, query));
         this.sorter = options.sorter;
         this.highlighter_html = options.highlighter_html;
         this.updater = options.updater ?? ((items) => this.defaultUpdater(items));
@@ -382,7 +382,7 @@ class Typeahead<ItemType extends string | object> {
     }
 
     process(items: ItemType[]): this {
-        const matching_items = $.grep(items, (item) => this.matcher(item));
+        const matching_items = $.grep(items, (item) => this.matcher(item, this.query));
 
         const final_items = this.sorter(matching_items);
 
@@ -396,9 +396,9 @@ class Typeahead<ItemType extends string | object> {
         return this.render(final_items.slice(0, this.items), matching_items).show();
     }
 
-    defaultMatcher(item: ItemType): boolean {
+    defaultMatcher(item: ItemType, query: string): boolean {
         assert(typeof item === "string");
-        return item.toLowerCase().includes(this.query.toLowerCase());
+        return item.toLowerCase().includes(query.toLowerCase());
     }
 
     render(final_items: ItemType[], matching_items: ItemType[]): this {
@@ -699,7 +699,7 @@ type TypeaheadOptions<ItemType> = {
     fixed?: boolean;
     header_html?: () => string | false;
     helpOnEmptyStrings?: boolean;
-    matcher?: (item: ItemType) => boolean;
+    matcher?: (item: ItemType, query: string) => boolean;
     naturalSearch?: boolean;
     on_escape?: () => void;
     openInputFieldOnKeyUp?: () => void;

web/src/pill_typeahead.js

@@ -80,8 +80,8 @@ export function set_up($input, pills, opts) {
             // default cases.
             return typeahead_helper.render_person(item);
         },
-        matcher(item) {
+        matcher(item, query) {
-            let query = this.query.toLowerCase();
+            query = query.toLowerCase();
             query = query.replaceAll("\u00A0", " ");
 
             if (include_streams(query)) {

web/src/settings_playgrounds.js

@@ -166,8 +166,8 @@ function build_page() {
         fixed: true,
         helpOnEmptyStrings: true,
         highlighter_html: (item) => render_typeahead_item({primary: language_labels.get(item)}),
-        matcher(item) {
+        matcher(item, query) {
-            const q = this.query.trim().toLowerCase();
+            const q = query.trim().toLowerCase();
             return item.toLowerCase().startsWith(q);
         },
         sorter(items) {

web/tests/pill_typeahead.test.js

@@ -193,9 +193,9 @@ run_test("set_up", ({mock_template, override}) => {
         (function test_matcher() {
             let result;
             if (opts.stream) {
-                result = config.matcher.call(fake_stream_this, denmark);
+                result = config.matcher(denmark, fake_stream_this.query);
                 assert.ok(result);
-                result = config.matcher.call(fake_stream_this, sweden);
+                result = config.matcher(sweden, fake_stream_this.query);
                 assert.ok(!result);
             }
             if (opts.user_group && opts.user) {
@@ -204,28 +204,28 @@ run_test("set_up", ({mock_template, override}) => {
                 or group is returned. */
 
                 // group query, with correct item.
-                result = config.matcher.call(fake_group_this, testers);
+                result = config.matcher(testers, fake_group_this.query);
                 assert.ok(result);
                 // group query, with wrong item.
-                result = config.matcher.call(fake_group_this, admins);
+                result = config.matcher(admins, fake_group_this.query);
                 assert.ok(!result);
                 // person query with correct item.
-                result = config.matcher.call(fake_person_this, me);
+                result = config.matcher(me, fake_person_this.query);
                 assert.ok(result);
                 // person query with wrong item.
-                result = config.matcher.call(fake_person_this, jill);
+                result = config.matcher(jill, fake_person_this.query);
                 assert.ok(!result);
             }
             if (opts.user_group && !opts.user) {
-                result = config.matcher.call(fake_group_this, testers);
+                result = config.matcher(testers, fake_group_this.query);
                 assert.ok(result);
-                result = config.matcher.call(fake_group_this, admins);
+                result = config.matcher(admins, fake_group_this.query);
                 assert.ok(!result);
             }
             if (opts.user && !opts.user_group) {
-                result = config.matcher.call(fake_person_this, me);
+                result = config.matcher(me, fake_person_this.query);
                 assert.ok(result);
-                result = config.matcher.call(fake_person_this, jill);
+                result = config.matcher(jill, fake_person_this.query);
                 assert.ok(!result);
             }
         })();