fix(UI): prevent frequent triggering of input method on mobile device…

…s when focusing on searchbar
rockbenben · Jan 1, 2025 · 6092a1e · 6092a1e
1 parent 309b4af
commit 6092a1e
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/pages/_components/SearchBar.tsx b/src/pages/_components/SearchBar.tsx
@@ -175,9 +175,14 @@ function SearchBar({ setShowUserPrompts = (value: boolean) => {}, setShowUserFav
   const searchRef = useRef<Input>(null);
   const [value, setValue] = useState<string | null>(null);
 
+  const isMobile = useCallback(() => {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }, []);
+
   useEffect(() => {
     setValue(readSearchName(location.search));
-    if (searchRef.current?.input) {
+    // 只在非移动设备上自动获取焦点
+    if (!isMobile() && searchRef.current?.input) {
       searchRef.current.input.focus();
     }
   }, [location]);
@@ -220,6 +225,7 @@ function SearchBar({ setShowUserPrompts = (value: boolean) => {}, setShowUserFav
         onChange={handleInput}
         onPressEnter={handleSearch}
         allowClear
+        autoFocus={!isMobile()}
         suffix={<Button icon={<SearchOutlined />} onClick={handleSearch} type="primary" />}
       />
     </div>