diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index e6da309..329f72d 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -7,13 +7,14 @@ import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
 import { PositionType } from '@/types/position';
 
-interface ModalContentProps extends React.ComponentProps<'div'> {
+export interface PortalProps extends React.ComponentProps<'div'> {
   ref: React.ForwardedRef<HTMLDivElement>;
   width?: React.CSSProperties['width'];
   disabledBG?: boolean;
+  disabledAutoFocus?: boolean;
 }
 
-const Portal = ({ children, ref, width, onKeyDown, ...props }: ModalContentProps) => {
+const Portal = ({ children, ref, width, onKeyDown, disabledAutoFocus, ...props }: PortalProps) => {
   const portalRef = React.useRef<HTMLDivElement>(null);
   const { showModal, toggleElement, reorgPos } = usePortal({ portalRef });
   const [items, setItems] = useState<HTMLElement[]>([]);
@@ -65,18 +66,21 @@ const Portal = ({ children, ref, width, onKeyDown, ...props }: ModalContentProps
 
   const handleOpen = React.useCallback(() => {
     if (portalRef.current) {
-      // portalRef.current.focus();
-      setItems(
-        Array.from(portalRef.current.querySelectorAll<HTMLElement>('[data-focus-enabled="true"]')).filter(e => {
-          return e.getAttribute('disabled') == null;
-        }),
-      );
+      if (!disabledAutoFocus) portalRef.current.focus();
+
+      const newItems = Array.from(
+        portalRef.current.querySelectorAll<HTMLElement>('[data-focus-enabled="true"]'),
+      ).filter(e => {
+        return e.getAttribute('disabled') == null;
+      });
+      console.log(newItems);
+      setItems(newItems);
     }
-  }, []);
+  }, [disabledAutoFocus]);
 
   React.useEffect(() => {
     if (showModal && portalRef.current) handleOpen();
-  }, [handleOpen, showModal]);
+  }, [handleOpen, showModal, children]);
 
   return (
     <PortalStyled
diff --git a/src/components/Portal/PortalContent.tsx b/src/components/Portal/PortalContent.tsx
index 99d5b15..206985c 100644
--- a/src/components/Portal/PortalContent.tsx
+++ b/src/components/Portal/PortalContent.tsx
@@ -1,19 +1,20 @@
 import styled from '@emotion/styled';
-import React from 'react';
 import { createPortal } from 'react-dom';
 
 import useContext from '@/hooks/useContext';
 
-import Portal from './Portal';
+import Portal, { PortalProps } from './Portal';
 import { PortalContext } from './PortalContext';
 
-interface ModalContentProps extends React.ComponentProps<'div'> {
-  ref: React.ForwardedRef<HTMLDivElement>;
-  width?: React.CSSProperties['width'];
-  disabledBG?: boolean;
-}
-
-export const PortalContent = ({ children, ref, width, disabledBG = false, onKeyDown, ...props }: ModalContentProps) => {
+export const PortalContent = ({
+  children,
+  ref,
+  width,
+  disabledBG = false,
+  disabledAutoFocus = false,
+  onKeyDown,
+  ...props
+}: PortalProps) => {
   const { showModal, setShowModal } = useContext(PortalContext)!;
 
   const close = () => {
@@ -26,7 +27,7 @@ export const PortalContent = ({ children, ref, width, disabledBG = false, onKeyD
         createPortal(
           <>
             {!disabledBG && <PortalBG id="bmates-portal-bg" className="bmates-portal-bg" onClick={close} />}
-            <Portal ref={ref} width={width} onKeyDown={onKeyDown} {...props}>
+            <Portal ref={ref} width={width} onKeyDown={onKeyDown} disabledAutoFocus={disabledAutoFocus} {...props}>
               {children}
             </Portal>
           </>,
diff --git a/src/components/Search/SearchContent.tsx b/src/components/Search/SearchContent.tsx
index 38a5e28..4abb889 100644
--- a/src/components/Search/SearchContent.tsx
+++ b/src/components/Search/SearchContent.tsx
@@ -12,7 +12,7 @@ interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
  */
 export const SearchContent = React.forwardRef<HTMLDivElement, ModalProps>(({ width, children, ...props }, ref) => {
   return (
-    <PortalContent width={width} ref={ref} role="group" {...props}>
+    <PortalContent width={width} ref={ref} role="group" disabledAutoFocus {...props}>
       {children}
     </PortalContent>
   );
diff --git a/src/stories/common/Search.stories.tsx b/src/stories/common/Search.stories.tsx
index 57a5bfd..f86f464 100644
--- a/src/stories/common/Search.stories.tsx
+++ b/src/stories/common/Search.stories.tsx
@@ -31,6 +31,24 @@ export default meta;
 
 type Story = StoryObj<typeof Search>;
 
+const animals = [
+  'dog',
+  'cat',
+  'elephant',
+  'lion',
+  'tiger',
+  'bear',
+  'giraffe',
+  'zebra',
+  'monkey',
+  'snake',
+  'rabbit',
+  'horse',
+  'deer',
+  'fox',
+  'wolf',
+];
+
 export const Default: Story = {
   args: {},
   decorators: [
@@ -55,27 +73,50 @@ export const Default: Story = {
   ],
 };
 
+const TempSearch = () => {
+  const [text, setText] = React.useState<string>('');
+
+  return (
+    <>
+      <SearchToggle>
+        Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
+      </SearchToggle>
+      <SearchContent width={600} style={{}}>
+        <SearchInput
+          onChange={e => {
+            setText(e.target.value);
+          }}
+        />
+        <SearchItemList>
+          <SearchLabel>Social</SearchLabel>
+          <SearchItem>
+            GitHub
+            <SearchShortcut>⌘+T</SearchShortcut>
+          </SearchItem>
+          <SearchItem>Facebook</SearchItem>
+          <SearchDivider />
+          <SearchLabel>User</SearchLabel>
+          <SearchItem>@bandmators</SearchItem>
+          <SearchItem>@bmates</SearchItem>
+          {animals
+            .filter(animal => animal.includes(text))
+            .slice(0, 5)
+            .map(item => (
+              <SearchItem key={item}>{item}</SearchItem>
+            ))}
+        </SearchItemList>
+      </SearchContent>
+    </>
+  );
+};
+
 export const Toggle: Story = {
   args: {},
   decorators: [
     () => {
       return (
         <Search>
-          <SearchToggle>
-            Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
-          </SearchToggle>
-          <SearchContent width={600} style={{}}>
-            <SearchInput />
-            <SearchItemList>
-              <SearchLabel>Social</SearchLabel>
-              <SearchItem>GitHub</SearchItem>
-              <SearchItem>Facebook</SearchItem>
-              <SearchDivider />
-              <SearchLabel>User</SearchLabel>
-              <SearchItem>@bandmators</SearchItem>
-              <SearchItem>@bmates</SearchItem>
-            </SearchItemList>
-          </SearchContent>
+          <TempSearch />
         </Search>
       );
     },
@@ -93,28 +134,7 @@ export const Space: Story = {
   args: {
     align: 'start',
     space: 16,
-    children: (
-      <>
-        <SearchToggle>
-          Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
-        </SearchToggle>
-        <SearchContent width={600} style={{}}>
-          <SearchInput />
-          <SearchItemList>
-            <SearchLabel>Social</SearchLabel>
-            <SearchItem>
-              GitHub
-              <SearchShortcut>⌘+T</SearchShortcut>
-            </SearchItem>
-            <SearchItem>Facebook</SearchItem>
-            <SearchDivider />
-            <SearchLabel>User</SearchLabel>
-            <SearchItem>@bandmators</SearchItem>
-            <SearchItem>@bmates</SearchItem>
-          </SearchItemList>
-        </SearchContent>
-      </>
-    ),
+    children: <TempSearch />,
   },
 };
 
@@ -128,28 +148,7 @@ export const AlignStart: Story = {
   },
   args: {
     align: 'start',
-    children: (
-      <>
-        <SearchToggle>
-          Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
-        </SearchToggle>
-        <SearchContent width={600} style={{}}>
-          <SearchInput />
-          <SearchItemList>
-            <SearchLabel>Social</SearchLabel>
-            <SearchItem>
-              GitHub
-              <SearchShortcut>⌘+T</SearchShortcut>
-            </SearchItem>
-            <SearchItem disabled>Facebook</SearchItem>
-            <SearchDivider />
-            <SearchLabel>User</SearchLabel>
-            <SearchItem>@bandmators</SearchItem>
-            <SearchItem>@bmates</SearchItem>
-          </SearchItemList>
-        </SearchContent>
-      </>
-    ),
+    children: <TempSearch />,
   },
 };
 
@@ -163,28 +162,7 @@ export const AlignCenter: Story = {
   },
   args: {
     align: 'center',
-    children: (
-      <>
-        <SearchToggle>
-          Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
-        </SearchToggle>
-        <SearchContent width={600} style={{}}>
-          <SearchInput />
-          <SearchItemList>
-            <SearchLabel>Social</SearchLabel>
-            <SearchItem>
-              GitHub
-              <SearchShortcut>⌘+T</SearchShortcut>
-            </SearchItem>
-            <SearchItem disabled>Facebook</SearchItem>
-            <SearchDivider />
-            <SearchLabel>User</SearchLabel>
-            <SearchItem>@bandmators</SearchItem>
-            <SearchItem>@bmates</SearchItem>
-          </SearchItemList>
-        </SearchContent>
-      </>
-    ),
+    children: <TempSearch />,
   },
 };
 
@@ -198,27 +176,6 @@ export const AlignEnd: Story = {
   },
   args: {
     align: 'end',
-    children: (
-      <>
-        <SearchToggle>
-          Search Input <kbd style={{ marginLeft: '1rem' }}>/</kbd>
-        </SearchToggle>
-        <SearchContent width={600} style={{}}>
-          <SearchInput />
-          <SearchItemList>
-            <SearchLabel>Social</SearchLabel>
-            <SearchItem>
-              GitHub
-              <SearchShortcut>⌘+T</SearchShortcut>
-            </SearchItem>
-            <SearchItem disabled>Facebook</SearchItem>
-            <SearchDivider />
-            <SearchLabel>User</SearchLabel>
-            <SearchItem>@bandmators</SearchItem>
-            <SearchItem>@bmates</SearchItem>
-          </SearchItemList>
-        </SearchContent>
-      </>
-    ),
+    children: <TempSearch />,
   },
 };