feat: add autoFocus (#74)

https://github.com/cnpm/cnpmweb/assets/7971419/d7a81f11-343d-40bc-b99a-431b0812cb31
cnpm · Feb 29, 2024 · c678c21 · c678c21
1 parent 2b91ed1
commit c678c21
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/src/components/LandingSearch.tsx b/src/components/LandingSearch.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { Input, Typography, AutoComplete, Space } from 'antd';
 import { useCachedSearch } from '@/hooks/useSearch';
 import { useRouter } from 'next/router';
@@ -12,6 +12,10 @@ export default function LandingSearch() {
   const [search, setSearch] = useState('');
   const [recent, setRecent] = useRecent();
   const router = useRouter();
+  const [load, setLoad] = useState(false);
+  useLayoutEffect(() => {
+    setLoad(true);
+  }, []);
 
   const { data: searchResult, isLoading } = useCachedSearch({
     keyword: search,
@@ -39,27 +43,30 @@ export default function LandingSearch() {
 
   return (
     <>
-      <AutoComplete
-        style={{ width: '100%' }}
-        options={options}
-        onChange={setSearch}
-        onSelect={(search) => router.push(`/package/${search}`)}
-      >
-        <Input.Search
-          size="large"
-          placeholder="输入 NPM 包名、作者、关键字等信息即可搜索..."
-          enterButton
-          onSearch={(_, e) => {
-            e?.stopPropagation();
-            router.push(`/packages?q=${search}`);
-          }}
-          loading={!!(search && isLoading)}
-        />
-      </AutoComplete>
+      {load && (
+        <AutoComplete
+          style={{ width: '100%' }}
+          options={options}
+          autoFocus
+          onChange={setSearch}
+          onSelect={(search) => router.push(`/package/${search}`)}
+        >
+          <Input.Search
+            size="large"
+            placeholder="输入 NPM 包名、作者、关键字等信息即可搜索..."
+            enterButton
+            onSearch={(_, e) => {
+              e?.stopPropagation();
+              router.push(`/packages?q=${search}`);
+            }}
+            loading={!!(search && isLoading)}
+          />
+        </AutoComplete>
+      )}
       <div style={{ marginTop: 16 }}>
         {recent && (
           <PackageTag
-            tags={recent.map(item => ({
+            tags={recent.map((item) => ({
               label: item,
               href: `/${item}`,
             }))}