chore: adjust keyboard event handling logic (#558)

Author: aojunhao123

src/Drawer.tsx

@@ -15,12 +15,13 @@ import type { DrawerClassNames, DrawerStyles } from './inter';
 export type Placement = 'left' | 'top' | 'right' | 'bottom';
 
 export interface DrawerProps
-  extends Omit<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>,
+  extends
+    Omit<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>,
     DrawerPanelEvents,
     DrawerPanelAccessibility {
   prefixCls?: string;
   open?: boolean;
-  onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+  onClose?: (e: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => void;
   destroyOnHidden?: boolean;
   getContainer?: PortalProps['getContainer'];
   panelRef?: React.Ref<HTMLDivElement>;
@@ -73,6 +74,7 @@ const Drawer: React.FC<DrawerProps> = props => {
     onClick,
     onKeyDown,
     onKeyUp,
+    onClose,
     resizable,
     defaultSize,
 
@@ -159,13 +161,21 @@ const Drawer: React.FC<DrawerProps> = props => {
     ...eventHandlers,
   };
 
+  const onEsc: PortalProps['onEsc'] = ({ top, event }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      onClose?.(event);
+    }
+  };
+
   return (
     <RefContext.Provider value={refContext}>
       <Portal
         open={mergedOpen || forceRender || animatedVisible}
         autoDestroy={false}
         getContainer={getContainer}
         autoLock={mask && (mergedOpen || animatedVisible)}
+        onEsc={onEsc}
       >
         <DrawerPopup {...drawerPopupProps} />
       </Portal>

src/DrawerPopup.tsx

@@ -31,8 +31,7 @@ export interface PushConfig {
 }
 
 export interface DrawerPopupProps
-  extends DrawerPanelEvents,
-    DrawerPanelAccessibility {
+  extends DrawerPanelEvents, DrawerPanelAccessibility {
   prefixCls: string;
   open?: boolean;
   inline?: boolean;
@@ -106,7 +105,6 @@ const DrawerPopup: React.ForwardRefRenderFunction<
     push,
     forceRender,
     autoFocus,
-    keyboard,
 
     // classNames
     classNames: drawerClassNames,
@@ -174,15 +172,6 @@ const DrawerPopup: React.ForwardRefRenderFunction<
         }
         break;
       }
-
-      // Close
-      case KeyCode.ESC: {
-        if (onClose && keyboard) {
-          event.stopPropagation();
-          onClose(event);
-        }
-        break;
-      }
     }
   };
 

tests/index.spec.tsx

@@ -299,22 +299,20 @@ describe('rc-drawer-menu', () => {
   describe('keyboard', () => {
     it('ESC to exit', () => {
       const onClose = jest.fn();
-      const { container } = render(
-        <Drawer open getContainer={false} onClose={onClose} />,
-      );
-      fireEvent.keyDown(container.querySelector('.rc-drawer-section'), {
-        keyCode: KeyCode.ESC,
+      render(<Drawer open getContainer={false} onClose={onClose} />);
+      fireEvent.keyDown(window, {
+        key: 'Escape',
       });
       expect(onClose).toHaveBeenCalled();
     });
 
     it('disable ESC to exit', () => {
       const onClose = jest.fn();
-      const { container } = render(
+      render(
         <Drawer open getContainer={false} onClose={onClose} keyboard={false} />,
       );
-      fireEvent.keyDown(container.querySelector('.rc-drawer-section'), {
-        keyCode: KeyCode.ESC,
+      fireEvent.keyDown(window, {
+        key: 'Escape',
       });
       expect(onClose).not.toHaveBeenCalled();
     });