From 8e8b8c6662d278e1704bc9059c5fe01716c9b5b6 Mon Sep 17 00:00:00 2001
From: casso <79615454+Cassolette@users.noreply.github.com>
Date: Wed, 22 Apr 2026 03:31:03 +0800
Subject: [PATCH 1/3] feat(search): clear and unfocus input on esc keypress

---
 packages/web-app-search/src/portals/SearchBar.vue      | 10 +++++++++-
 .../tests/unit/portals/SearchBar.spec.ts               |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 8541c95480..d4f6a69a3b 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -24,7 +24,7 @@
       @update:model-value="updateTerm"
       @clear="onClear"
       @click="showPreview"
-      @keyup.esc="hideOptionsDrop"
+      @keyup.esc="onKeyUpEsc"
       @keyup.up="onKeyUpUp"
       @keyup.down="onKeyUpDown"
       @keyup.enter="onKeyUpEnter"
@@ -513,6 +513,14 @@ export default defineComponent({
     onKeyUpDown() {
       this.activePreviewIndex = this.findNextPreviewIndex(false)
     },
+    onKeyUpEsc() {
+      if (this.term) {
+        this.updateTerm('')
+        return
+      }
+      const inputElement = document.getElementsByClassName('oc-search-input')[0] as HTMLElement
+      inputElement.blur()
+    },
     getSearchResultForProvider(provider: SearchProvider) {
       return this.searchResults.find(({ providerId }) => providerId === provider.id)?.result
     },
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index a73246ed08..2990a72a39 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -251,6 +251,13 @@ describe('Search Bar portal component', () => {
     wrapper.vm.onSearchShortcut(keyEvent)
     textInput.remove()
   })
+  test('clears search term on key press esc while input has focus', async () => {
+    const { wrapper } = getMountedWrapper()
+    wrapper.find(selectors.searchInput).setValue('albert')
+    await flushPromises()
+    wrapper.find(selectors.searchInput).trigger('keyup.esc')
+    expect(wrapper.vm.term).toBe('')
+  })
 })
 
 function getMountedWrapper({

From 207f876c917ae03e29f0cfa84ffe8295d4b13b99 Mon Sep 17 00:00:00 2001
From: casso <79615454+Cassolette@users.noreply.github.com>
Date: Wed, 22 Apr 2026 03:35:55 +0800
Subject: [PATCH 2/3] fix(search): use tag name anchor for unit test compat

---
 packages/web-app-search/src/portals/SearchBar.vue        | 2 +-
 .../web-app-search/tests/unit/portals/SearchBar.spec.ts  | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index d4f6a69a3b..44687e8507 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -518,7 +518,7 @@ export default defineComponent({
         this.updateTerm('')
         return
       }
-      const inputElement = document.getElementsByClassName('oc-search-input')[0] as HTMLElement
+      const inputElement = this.$el.getElementsByTagName('input')[0] as HTMLElement
       inputElement.blur()
     },
     getSearchResultForProvider(provider: SearchProvider) {
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 2990a72a39..1b23709af8 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -258,6 +258,15 @@ describe('Search Bar portal component', () => {
     wrapper.find(selectors.searchInput).trigger('keyup.esc')
     expect(wrapper.vm.term).toBe('')
   })
+  test('unfocuses search input on key press esc when search term is empty', async () => {
+    const { wrapper } = getMountedWrapper()
+    const blurSpy = vi.spyOn(
+      wrapper.find(selectors.searchInput).element as HTMLInputElement,
+      'blur'
+    )
+    wrapper.find(selectors.searchInput).trigger('keyup.esc')
+    expect(blurSpy).toHaveBeenCalled()
+  })
 })
 
 function getMountedWrapper({

From 258a0613a098cf6223695c92c0c773a465a2f78c Mon Sep 17 00:00:00 2001
From: cazo <79615454+Cassolette@users.noreply.github.com>
Date: Wed, 22 Apr 2026 15:54:21 +0800
Subject: [PATCH 3/3] refactor: unneeded async from test

---
 packages/web-app-search/tests/unit/portals/SearchBar.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 1b23709af8..1dcf0f1565 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -258,7 +258,7 @@ describe('Search Bar portal component', () => {
     wrapper.find(selectors.searchInput).trigger('keyup.esc')
     expect(wrapper.vm.term).toBe('')
   })
-  test('unfocuses search input on key press esc when search term is empty', async () => {
+  test('unfocuses search input on key press esc when search term is empty', () => {
     const { wrapper } = getMountedWrapper()
     const blurSpy = vi.spyOn(
       wrapper.find(selectors.searchInput).element as HTMLInputElement,