fix: autocomplete select

chaitin · Dec 29, 2023 · d8f06ea · d8f06ea
1 parent b090748
commit d8f06ea
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx
@@ -125,11 +125,25 @@ const Header: React.FC<{}> = () => {
       >
         <Autocomplete
           disablePortal
-          blurOnSelect
           id='combo-box-demo'
           open={openSearch}
+          autoComplete
           onClose={() => setOpenSearch(false)}
           onOpen={() => setOpenSearch(true)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              // Prevent's default 'Enter' behavior.
+              event.defaultMuiPrevented = true;
+              const tool = allTools.find(
+                (item) => item.label === (event.target as any)?.value || ''
+              );
+              if (tool) {
+                setOpenSearch(false);
+                router.push(tool.path);
+              }
+              // your handler code
+            }
+          }}
           filterOptions={(menu, state) =>
             menu.filter((item) => {
               return (
@@ -143,30 +157,30 @@ const Header: React.FC<{}> = () => {
             })
           }
           options={allTools}
-          renderOption={(props: object, option: Tool) => (
-            <Box
-              sx={{
-                borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
-                '&:hover': {
-                  background: 'rgba(17, 35, 90, 0.05)',
-                },
-              }}
-            >
-              <Link
-                href={option.path}
-                className='custom-link'
+          renderOption={(props: object, option: Tool, state) => {
+            return (
+              <Box
+                sx={{
+                  borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+                  '&:hover': {
+                    background: 'rgba(17, 35, 90, 0.05)',
+                  },
+                }}
                 onClick={() => setOpenSearch(false)}
+                {...props}
               >
-                <ToolCard tool={option} showStar={false} />
-              </Link>
-            </Box>
-          )}
+                <Link href={option.path} className='custom-link'>
+                  <ToolCard tool={option} showStar={false} />
+                </Link>
+              </Box>
+            );
+          }}
           sx={{ height: '100%' }}
+          autoHighlight
           renderInput={(params) => (
             <Stack direction='row'>
               <SearchIcon sx={{ mt: 1, mx: 1 }} />
               <TextField
-                // autoFocus
                 {...params}
                 placeholder='搜索'
                 sx={{ height: '100%' }}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -43,6 +43,11 @@ export default function App({
           name='viewport'
           content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'
         />
+        <title>
+          {currentItem?.label
+            ? currentItem?.label + ' - 百川在线工具箱'
+            : '百川云常用工具'}
+        </title>
         <meta
           name='description'
           property='og:description'

diff --git a/src/utils/tools.ts b/src/utils/tools.ts
@@ -175,13 +175,6 @@ export const allTools: Tool[] = [
     key: [],
     subTitle: 'JSON 转 Go 结构体。',
   },
-  {
-    label: 'CIDR 计算器',
-    tags: [Tags.OTHER, Tags.HOT],
-    path: '/cidr',
-    key: [],
-    subTitle: '计算 cidr 的小工具',
-  },
   {
     label: 'JSON 转 yaml',
     tags: [Tags.JSON],