diff --git a/frontend_tests/puppeteer_lib/common.ts b/frontend_tests/puppeteer_lib/common.ts
index deceea9a6f..479edadd16 100644
--- a/frontend_tests/puppeteer_lib/common.ts
+++ b/frontend_tests/puppeteer_lib/common.ts
@@ -479,29 +479,11 @@ class CommonUtils {
         item: string,
     ): Promise<void> {
         console.log(`Looking in ${field_selector} to select ${str}, ${item}`);
-        await page.evaluate(
-            (field_selector: string, str: string, item: string) => {
-                // Set the value and then send a bogus keyup event to trigger
-                // the typeahead.
-                $(field_selector)
-                    .trigger("focus")
-                    .val(str)
-                    .trigger(new $.Event("keyup", {which: 0}));
-
-                // Trigger the typeahead.
-                // Reaching into the guts of Bootstrap Typeahead like this is not
-                // great, but I found it very hard to do it any other way.
-
-                const tah = $(field_selector).data().typeahead;
-                tah.mouseenter({
-                    currentTarget: $(`.typeahead:visible li:contains("${CSS.escape(item)}")`)[0],
-                });
-                tah.select();
-            },
-            field_selector,
-            str,
-            item,
+        await this.clear_and_type(page, field_selector, str);
+        const entry = await page.waitForXPath(
+            `//*[@class="typeahead dropdown-menu" and contains(@style, "display: block")]//li[contains(normalize-space(), "${item}")]//a`,
         );
+        await entry!.click();
     }
 
     async run_test(test_function: (page: Page) => Promise<void>): Promise<void> {
diff --git a/frontend_tests/puppeteer_tests/02-message-basics.ts b/frontend_tests/puppeteer_tests/02-message-basics.ts
index f0090139cf..ea43b020b8 100644
--- a/frontend_tests/puppeteer_tests/02-message-basics.ts
+++ b/frontend_tests/puppeteer_tests/02-message-basics.ts
@@ -131,6 +131,8 @@ async function search_and_check(
     check: (page: Page) => Promise<void>,
     expected_narrow_title: string,
 ): Promise<void> {
+    await page.click(".search_icon");
+    await page.waitForSelector("#search_query", {visible: true});
     await common.select_item_via_typeahead(page, "#search_query", search_str, item_to_select);
     await check(page);
     assert.strictEqual(await page.title(), expected_narrow_title);
@@ -139,6 +141,8 @@ async function search_and_check(
 }
 
 async function search_silent_user(page: Page, str: string, item: string): Promise<void> {
+    await page.click(".search_icon");
+    await page.waitForSelector("#search_query", {visible: true});
     await common.select_item_via_typeahead(page, "#search_query", str, item);
     await page.waitForSelector("#silent_user", {visible: true});
     const expect_message = "You haven't received any messages sent by this user yet!";
@@ -165,6 +169,8 @@ async function expect_non_existing_users(page: Page): Promise<void> {
 }
 
 async function search_non_existing_user(page: Page, str: string, item: string): Promise<void> {
+    await page.click(".search_icon");
+    await page.waitForSelector("#search_query", {visible: true});
     await common.select_item_via_typeahead(page, "#search_query", str, item);
     await expect_non_existing_user(page);
     await un_narrow(page);
diff --git a/frontend_tests/puppeteer_tests/09-mention.ts b/frontend_tests/puppeteer_tests/09-mention.ts
index 11da37732c..ca5af59f1a 100644
--- a/frontend_tests/puppeteer_tests/09-mention.ts
+++ b/frontend_tests/puppeteer_tests/09-mention.ts
@@ -15,7 +15,7 @@ async function test_mention(page: Page): Promise<void> {
         stream_message_recipient_stream: "Verona",
         stream_message_recipient_topic: "Test mention all",
     });
-    await common.select_item_via_typeahead(page, "#compose-textarea", "@**all**", "all");
+    await common.select_item_via_typeahead(page, "#compose-textarea", "@**all", "all");
     await common.ensure_enter_does_not_send(page);
 
     console.log("Checking for all everyone warning");