feat(common): search input toggle key event (#24)

Bandmators · May 15, 2024 · 1944924 · 1944924
1 parent cf9911b
commit 1944924
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
@@ -16,14 +16,15 @@ 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> = {
     ArrowDown: () => focus('next'),
     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
@@ -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) {