From cf9cf14dde99247e64d6afd63f9c31e16232da41 Mon Sep 17 00:00:00 2001 From: evykassirer Date: Sun, 24 Mar 2024 20:31:08 -0700 Subject: [PATCH] typeahead: Pass query to matcher instead of using hacky this. --- web/src/bootstrap_typeahead.ts | 12 ++++++------ web/src/pill_typeahead.js | 4 ++-- web/src/settings_playgrounds.js | 4 ++-- web/tests/pill_typeahead.test.js | 20 ++++++++++---------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts index 718dbec2ac..49e798a40d 100644 --- a/web/src/bootstrap_typeahead.ts +++ b/web/src/bootstrap_typeahead.ts @@ -191,7 +191,7 @@ type InputElement = class Typeahead { 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 { 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 { } 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 { 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 = { 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; diff --git a/web/src/pill_typeahead.js b/web/src/pill_typeahead.js index 37d52de0d9..966741b49f 100644 --- a/web/src/pill_typeahead.js +++ b/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) { - let query = this.query.toLowerCase(); + matcher(item, query) { + query = query.toLowerCase(); query = query.replaceAll("\u00A0", " "); if (include_streams(query)) { diff --git a/web/src/settings_playgrounds.js b/web/src/settings_playgrounds.js index 125208f237..16dd0df8a7 100644 --- a/web/src/settings_playgrounds.js +++ b/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) { - const q = this.query.trim().toLowerCase(); + matcher(item, query) { + const q = query.trim().toLowerCase(); return item.toLowerCase().startsWith(q); }, sorter(items) { diff --git a/web/tests/pill_typeahead.test.js b/web/tests/pill_typeahead.test.js index af709fbf0c..83b95d40c5 100644 --- a/web/tests/pill_typeahead.test.js +++ b/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); } })();