From e030c1ee8ccb4427750e4e8a2675bccdfe8258ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8?= <luotianyi@luotianyi.me>
Date: Wed, 23 Oct 2024 18:23:47 +0800
Subject: [PATCH] fix: search box animating on small screen (#4076)

---
 framework/core/js/src/common/components/AbstractSearch.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/framework/core/js/src/common/components/AbstractSearch.tsx b/framework/core/js/src/common/components/AbstractSearch.tsx
index 57b235ccea..69bc115c94 100644
--- a/framework/core/js/src/common/components/AbstractSearch.tsx
+++ b/framework/core/js/src/common/components/AbstractSearch.tsx
@@ -96,7 +96,10 @@ export default abstract class AbstractSearch<T extends SearchAttrs = SearchAttrs
     };
 
     return (
-      <div role="search" className="Search" aria-label={this.attrs.a11yRoleLabel}>
+      <div role="search" className="Search" aria-label={this.attrs.a11yRoleLabel} onclick={() => {
+        this.$('input').blur();
+        setTimeout(() => openSearchModal(), 150);
+      }}>
         <Input
           type="search"
           className="Search-input"
@@ -112,7 +115,6 @@ export default abstract class AbstractSearch<T extends SearchAttrs = SearchAttrs
             else this.searchState.setValue(value);
           }}
           inputAttrs={{
-            onclick: () => setTimeout(() => openSearchModal(), 150),
             // for keyboard navigation, click event would be triggered on keydown
             onkeydown: (e: KeyboardEvent) => {
               if (e.key === 'Enter') {