fix: 修复联系人搜索框中文输入消失

src/components/search-bar/index.tsx

@@ -1,23 +1,45 @@
-import { Input, View, Image} from '@tarojs/components'
-import style from './index.module.less'
-import IconClear from '@/images/icon-clear.png'
-import IconSearch from '@/images/icon_search_16.png'
+import { Input, View, Image } from "@tarojs/components";
+import style from "./index.module.less";
+import IconClear from "@/images/icon-clear.png";
+import IconSearch from "@/images/icon_search_16.png";
 interface Props {
   value: string;
   onChange: (newValue: string) => void;
   onClear: () => void;
+  onBlur: () => void;
+  onFocus: () => void;
 }
-export default function Index({value, onChange, onClear}: Props) {
-  const handleClear = ()=> {
-    onClear()
-  }
+export default function Index({
+  value,
+  onChange,
+  onClear,
+  onBlur,
+  onFocus,
+}: Props) {
+  const handleClear = () => {
+    onClear();
+  };
   return (
     <View className={style.searchBarContainer}>
       <Image src={IconSearch} className={style.searchBarIcon}></Image>
-      <Input value={value} onInput={(e:any)=> onChange(e.target.value)} placeholderTextColor='#A1A7BA' type='text' placeholder='搜索智能体' className={style.searchBarInput}  />
+      <Input
+        value={value}
+        onInput={(e: any) => onChange(e.target.value)}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        placeholderTextColor="#A1A7BA"
+        type="text"
+        placeholder="搜索智能体"
+        className={style.searchBarInput}
+      />
       {/* {value && <View className={`iconfont icon-a-icon_24_edit1  ${style.searchBarClearButton}`} onClick={handleClear}></View>} */}
-      {value && <Image src={IconClear} className={`${style.searchBarClearButton}`} onClick={handleClear}></Image>}
-      
+      {value && (
+        <Image
+          src={IconClear}
+          className={`${style.searchBarClearButton}`}
+          onClick={handleClear}
+        ></Image>
+      )}
     </View>
-  )
+  );
 }

src/pages/contact/index.tsx

@@ -29,6 +29,7 @@ export default function Index() {
     });
     return res.data;
   };
+  const [isInputting, setIsInputting] = useState(false);
   const [totalCount, setTotalCount] = useState<number>(0);
   const getKey = (pageIndex: number, previousPageData) => {
     if (pageIndex === 0)
@@ -48,14 +49,30 @@ export default function Index() {
     revalidateOnMount: false
   });
 
+  // 修改搜索框的 onChange 和 onFocus/onBlur
   const handleSearchBarChanged = (v: string) => {
     setSearchValue(v);
   };
 
+  const handleFocus = () => {
+    setIsInputting(true);
+  };
+
+  const handleBlur = () => {
+    // 延迟一点时间，避免 blur 后立即隐藏，影响输入法
+    setTimeout(() => {
+      setIsInputting(false);
+    }, 100);
+  };
+
   const handleClear = () => {
     setSearchValue("");
   };
 
+  // 有联系人列表，或者搜索栏有值，说明是搜索结果，搜索结果有可能是 0 条记录
+  const showSearchBar = totalCount > 0 || !!searchValue.length || isInputting;
+
+
   const onScrollToUpper = () => {
     // 加载更多数据
     // 如果搜索框中有数据由不加载更多数据
@@ -133,8 +150,7 @@ export default function Index() {
     ];
   };
 
-  // 有联系人列表，或者搜索栏有值，说明是搜索结果，搜索结果有可能是 0 条记录
-  const showSearchBar = totalCount > 0 || !!searchValue.length
+  
 
   const renderContent = () => {
     if (list?.length) {
@@ -172,8 +188,10 @@ export default function Index() {
           {showSearchBar && (
             <SearchBar
               value={searchValue}
-              onChange={(e) => handleSearchBarChanged(e)}
-              onClear={() => handleClear()}
+              onChange={handleSearchBarChanged}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onClear={handleClear}
             ></SearchBar>
           )}
         </View>