From 1944924a59830bc60e06f6beb507127df42ce30c Mon Sep 17 00:00:00 2001
From: Ye-Chan Kang <kyechan99@gmail.com>
Date: Wed, 15 May 2024 22:36:36 +0900
Subject: [PATCH] feat(common): search input toggle key event (#24)

---
 src/components/Portal/Portal.tsx            | 3 ++-
 src/components/Search/SearchInputToggle.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index 805dce2..99b8b2e 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -16,7 +16,7 @@ export interface PortalProps extends React.ComponentProps<'div'> {
 
 const Portal = ({ children, ref, width, onKeyDown, disabledAutoFocus, ...props }: PortalProps) => {
   const portalRef = React.useRef<HTMLDivElement>(null);
-  const { showModal, toggleElement, reorgPos } = usePortal({ portalRef });
+  const { showModal, setShowModal, toggleElement, reorgPos } = usePortal({ portalRef });
   const [items, setItems] = useState<HTMLElement[]>([]);
 
   const ACTIONS: Record<string, (e: React.KeyboardEvent<HTMLInputElement>) => void> = {
@@ -24,6 +24,7 @@ const Portal = ({ children, ref, width, onKeyDown, disabledAutoFocus, ...props }
     ArrowUp: () => focus('prev'),
     Tab: () => focus('next'),
     Enter: () => select(),
+    Escape: () => setShowModal(false),
   };
 
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
diff --git a/src/components/Search/SearchInputToggle.tsx b/src/components/Search/SearchInputToggle.tsx
index f7c161b..19d1af8 100644
--- a/src/components/Search/SearchInputToggle.tsx
+++ b/src/components/Search/SearchInputToggle.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 
+import { Input } from '@/components/Input';
 import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';
 
-import { Input } from '../..';
-
 type ComponentPropsWithoutRef<E extends React.ElementType> = React.ComponentPropsWithoutRef<E>;
 
 /**
@@ -29,9 +28,9 @@ export const SearchInputToggle = React.forwardRef<HTMLInputElement, ComponentPro
       setShowModal(true);
     };
 
-    const closeModal = () => {
+    const closeModal = React.useCallback(() => {
       setShowModal(false);
-    };
+    }, []);
 
     const ACTIONS: Record<string, (e: React.KeyboardEvent<HTMLInputElement>) => void> = {
       ArrowDown: () => focus('next'),
@@ -42,6 +41,7 @@ export const SearchInputToggle = React.forwardRef<HTMLInputElement, ComponentPro
     };
 
     const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      console.log(e);
       const handler = ACTIONS[e.key];
 
       if (handler) {