chore: adjust keyboard event handling logic

Author: aojunhao123

.gitignore

@@ -50,3 +50,4 @@ pnpm-lock.yaml
 .dumi/tmp-production
 
 bun.lockb
+.vscode

package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.1.0",
     "@rc-component/util": "^1.5.0",
     "clsx": "^2.1.1"
   },

src/Dialog/index.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import contains from '@rc-component/util/lib/Dom/contains';
 import useId from '@rc-component/util/lib/hooks/useId';
-import KeyCode from '@rc-component/util/lib/KeyCode';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
@@ -16,10 +15,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     prefixCls = 'rc-dialog',
     zIndex,
     visible = false,
-    keyboard = true,
     focusTriggerAfterClose = true,
-    // scrollLocker,
-    // Wrapper
     wrapStyle,
     wrapClassName,
     wrapProps,
@@ -142,14 +138,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     };
   }
 
-  function onWrapperKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (keyboard && e.keyCode === KeyCode.ESC) {
-      e.stopPropagation();
-      onInternalClose(e);
-      return;
-    }
-  }
-
   // ========================= Effect =========================
   useEffect(() => {
     if (visible) {
@@ -201,7 +189,6 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         className={modalClassNames?.mask}
       />
       <div
-        onKeyDown={onWrapperKeyDown}
         className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}

src/DialogWrap.tsx

@@ -1,4 +1,4 @@
-import Portal from '@rc-component/portal';
+import Portal, { type PortalProps } from '@rc-component/portal';
 import * as React from 'react';
 import { RefContext } from './context';
 import Dialog from './Dialog';
@@ -22,11 +22,21 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
     afterClose,
     closable,
     panelRef,
+    keyboard = true,
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
 
   const refContext = React.useMemo(() => ({ panel: panelRef }), [panelRef]);
 
+  const onEsc: PortalProps['onEsc'] = ({ top, event }) => {
+    if (top && keyboard) {
+      event.stopPropagation();
+      // @ts-ignore
+      props.onClose?.(event);
+      return;
+    }
+  };
+
   React.useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
@@ -42,6 +52,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
     <RefContext.Provider value={refContext}>
       <Portal
         open={visible || forceRender || animatedVisible}
+        onEsc={onEsc}
         autoDestroy={false}
         getContainer={getContainer}
         autoLock={visible || animatedVisible}

src/IDialogPropTypes.tsx src/IDialogPropTypes.tssrc/IDialogPropTypes.tsx renamed to src/IDialogPropTypes.ts

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import { fireEvent, render, act } from '@testing-library/react';
 import { Provider } from '@rc-component/motion';
-import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { cloneElement, useEffect } from 'react';
 import type { DialogProps } from '../src';
 import Dialog from '../src';
@@ -164,10 +163,8 @@ describe('dialog', () => {
   it('esc to close', () => {
     const onClose = jest.fn();
     render(<Dialog onClose={onClose} visible />);
-    jest.runAllTimers();
 
-    fireEvent.keyDown(document.querySelector('.rc-dialog'), { keyCode: KeyCode.ESC });
-    jest.runAllTimers();
+    fireEvent.keyDown(window, { key: 'Escape' });
     expect(onClose).toHaveBeenCalled();
   });
 

tests/index.spec.tsx

@@ -17,7 +17,8 @@
       "@rc-component/dialog": [
         "src/index.ts"
       ]
-    }
+    },
+   "types": ["node", "jest", "@testing-library/jest-dom"],
   },
   "include": [
     ".dumirc.ts",