diff --git a/src/Drawer.tsx b/src/Drawer.tsx index 7515560..07baf11 100644 --- a/src/Drawer.tsx +++ b/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, + extends + Omit, 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; @@ -73,6 +74,7 @@ const Drawer: React.FC = props => { onClick, onKeyDown, onKeyUp, + onClose, resizable, defaultSize, @@ -159,6 +161,13 @@ const Drawer: React.FC = props => { ...eventHandlers, }; + const onEsc: PortalProps['onEsc'] = ({ top, event }) => { + if (top && keyboard) { + event.stopPropagation(); + onClose?.(event); + } + }; + return ( = props => { autoDestroy={false} getContainer={getContainer} autoLock={mask && (mergedOpen || animatedVisible)} + onEsc={onEsc} > diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx index 4f2a9f1..8e42a7f 100644 --- a/src/DrawerPopup.tsx +++ b/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; - } } }; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 76cfd51..d648c24 100755 --- a/tests/index.spec.tsx +++ b/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( - , - ); - fireEvent.keyDown(container.querySelector('.rc-drawer-section'), { - keyCode: KeyCode.ESC, + render(); + fireEvent.keyDown(window, { + key: 'Escape', }); expect(onClose).toHaveBeenCalled(); }); it('disable ESC to exit', () => { const onClose = jest.fn(); - const { container } = render( + render( , ); - fireEvent.keyDown(container.querySelector('.rc-drawer-section'), { - keyCode: KeyCode.ESC, + fireEvent.keyDown(window, { + key: 'Escape', }); expect(onClose).not.toHaveBeenCalled(); });