FIX: correctly closes search menu on escape (#29848)

Prior to this fix the menu would not close if a child was in focus, and the search suggestions had a special implementation to handle this. The fix now relies on trapping the keydown escape event on the top dip of the search menu.

app/assets/javascripts/discourse/app/components/search-menu.hbs

@@ -1,4 +1,9 @@
-<div class={{this.classNames}} {{did-insert this.setupEventListeners}}>
+<div
+  class={{this.classNames}}
+  {{did-insert this.setupEventListeners}}
+  {{! template-lint-disable no-invalid-interactive }}
+  {{on "keydown" this.onKeydown}}
+>
   <div class="search-input">
     {{#if this.search.inTopicContext}}
       <DButton

app/assets/javascripts/discourse/app/components/search-menu.js

@@ -105,6 +105,13 @@ export default class SearchMenu extends Component {
     return false;
   }
 
+  @action
+  onKeydown(event) {
+    if (event.key === "Escape") {
+      this.close();
+    }
+  }
+
   @action
   close() {
     if (this.args?.onClose) {

app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.js

@@ -70,19 +70,13 @@ export default class AssistantItem extends Component {
       return;
     }
 
-    if (e.key === "Escape") {
-      this.args.closeSearchMenu();
-      e.preventDefault();
-      return false;
-    }
-
     if (e.key === "Enter") {
       this.itemSelected();
     }
 
-    this.search.handleArrowUpOrDown(e);
-    e.stopPropagation();
-    e.preventDefault();
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      this.search.handleArrowUpOrDown(e);
+    }
   }
 
   @action

app/assets/javascripts/discourse/app/components/search-menu/results/assistant.hbs

@@ -11,7 +11,6 @@
         @withInLabel={{@withInLabel}}
         @isIntersection={{true}}
         @searchAllTopics={{true}}
-        @closeSearchMenu={{@closeSearchMenu}}
         @searchTermChanged={{@searchTermChanged}}
         @suggestionKeyword={{@suggestionKeyword}}
         @typeClass="tag-intersection"
@@ -27,7 +26,6 @@
           @slug={{get this.fullSlugForCategoryMap result.model.id}}
           @withInLabel={{@withInLabel}}
           @searchAllTopics={{true}}
-          @closeSearchMenu={{@closeSearchMenu}}
           @searchTermChanged={{@searchTermChanged}}
           @suggestionKeyword={{@suggestionKeyword}}
           @typeClass="category"
@@ -39,7 +37,6 @@
           @slug={{concat this.prefix "#" result.name}}
           @withInLabel={{@withInLabel}}
           @searchAllTopics={{true}}
-          @closeSearchMenu={{@closeSearchMenu}}
           @searchTermChanged={{@searchTermChanged}}
           @suggestionKeyword={{@suggestionKeyword}}
           @typeClass="tag"
@@ -55,7 +52,6 @@
         @slug={{concat this.prefix "@" this.user.username}}
         @suffix={{i18n "search.in_topics_posts"}}
         @searchAllTopics={{true}}
-        @closeSearchMenu={{@closeSearchMenu}}
         @searchTermChanged={{@searchTermChanged}}
         @suggestionKeyword={{@suggestionKeyword}}
         @typeClass="user"
@@ -65,7 +61,6 @@
         @user={{this.user}}
         @slug={{concat this.prefix "@" this.user.username}}
         @suffix={{i18n "search.in_this_topic"}}
-        @closeSearchMenu={{@closeSearchMenu}}
         @searchTermChanged={{@searchTermChanged}}
         @suggestionKeyword={{@suggestionKeyword}}
         @typeClass="user"
@@ -76,7 +71,6 @@
           @user={{result}}
           @slug={{concat this.prefix "@" result.username}}
           @searchAllTopics={{true}}
-          @closeSearchMenu={{@closeSearchMenu}}
           @searchTermChanged={{@searchTermChanged}}
           @suggestionKeyword={{@suggestionKeyword}}
           @typeClass="user"
@@ -93,7 +87,6 @@
         @slug={{concat this.prefix item}}
         @label={{item}}
         @searchAllTopics={{true}}
-        @closeSearchMenu={{@closeSearchMenu}}
         @searchTermChanged={{@searchTermChanged}}
         @suggestionKeyword={{@suggestionKeyword}}
         @typeClass="shortcut"

app/assets/javascripts/discourse/tests/acceptance/search-test.js

@@ -2,6 +2,7 @@ import {
   click,
   currentURL,
   fillIn,
+  focus,
   triggerEvent,
   triggerKeyEvent,
   visit,
@@ -415,6 +416,15 @@ acceptance("Search - Anonymous", function (needs) {
       .dom(".search-menu .search-result-topic .item .topic-title img[alt='+1']")
       .exists(":+1: in the topic title is properly converted to an emoji");
   });
+
+  test("pressing escape correctly closes the menu", async function (assert) {
+    await visit("/");
+    await click("#search-button");
+    await focus(".show-advanced-search");
+    await triggerKeyEvent("#search-term", "keydown", "Escape");
+
+    assert.dom(".search-menu-panel").doesNotExist();
+  });
 });
 
 acceptance("Search - Authenticated", function (needs) {
@@ -1253,7 +1263,7 @@ acceptance("Search - assistant", function (needs) {
     );
   });
 
-  test("topic results - soft loads the topic results after closing then  search menu", async function (assert) {
+  test("topic results - soft loads the topic results after closing the search menu", async function (assert) {
     await visit("/");
     await click("#search-button");
     await fillIn("#search-term", "Development mode");