diff --git a/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx b/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx
index 6a315e1947..600448de88 100644
--- a/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx
@@ -1,7 +1,13 @@
 import keywords from '@blocksuite/icons/keywords/en.json';
 import * as allIcons from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { startTransition, useCallback, useEffect, useState } from 'react';
+import {
+  type KeyboardEvent,
+  startTransition,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
 import { IconButton } from '../../../button';
 import Input from '../../../input';
@@ -89,6 +95,13 @@ export const AffineIconPicker = ({
     [addRecentIcon, onSelect, color]
   );
 
+  const handleSearchKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
   return (
     <div className={pickerStyles.root}>
       {/* Search */}
@@ -96,6 +109,7 @@ export const AffineIconPicker = ({
         <Input
           value={keyword}
           onChange={setKeyword}
+          onKeyDown={handleSearchKeyDown}
           className={pickerStyles.searchInput}
           preFix={
             <div style={{ marginLeft: 10, lineHeight: 0 }}>
diff --git a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx
index 5bde85b4f1..d9026d59df 100644
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx
@@ -1,6 +1,6 @@
 import { SearchIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { useCallback, useState } from 'react';
+import { type KeyboardEvent, useCallback, useState } from 'react';
 
 import { IconButton } from '../../../button';
 import Input from '../../../input';
@@ -38,12 +38,20 @@ export const EmojiPicker = ({
     [addRecent, onSelect]
   );
 
+  const handleSearchKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
   return (
     <div className={pickerStyles.root}>
       <header className={pickerStyles.searchContainer}>
         <Input
           value={keyword}
           onChange={setKeyword}
+          onKeyDown={handleSearchKeyDown}
           className={pickerStyles.searchInput}
           preFix={
             <div style={{ marginLeft: 10, lineHeight: 0 }}>