fix: search box animating on small screen (#4076)

flarum · Oct 23, 2024 · e030c1e · e030c1e
1 parent ea9b059
commit e030c1e
Showing 1 changed file with 4 additions and 2 deletions.
diff --git 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') {