fix: Modal hooks press esc can not trigger await (ant-design#44646)

* test: test driven * fix: await missing esc
ammar-knowledge · Sep 5, 2023 · 1b61870 · 1b61870
1 parent 49e1efa
commit 1b61870
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 22 deletions.
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -1,17 +1,18 @@
+import * as React from 'react';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
-import * as React from 'react';
+
 import ActionButton from '../_util/ActionButton';
 import { getTransitionName } from '../_util/motion';
 import warning from '../_util/warning';
 import type { ThemeConfig } from '../config-provider';
 import ConfigProvider from '../config-provider';
 import { useLocale } from '../locale';
-import Dialog from './Modal';
 import type { ModalFuncProps, ModalLocale } from './interface';
+import Dialog from './Modal';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -172,6 +173,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     closeIcon,
     modalRender,
     focusTriggerAfterClose,
+    onConfirm,
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
@@ -211,7 +213,10 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
           { [`${confirmPrefixCls}-centered`]: !!props.centered },
           wrapClassName,
         )}
-        onCancel={() => close?.({ triggerCancel: true })}
+        onCancel={() => {
+          close?.({ triggerCancel: true });
+          onConfirm?.(false);
+        }}
         open={open}
         title=""
         footer={null}

diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx
@@ -1,15 +1,15 @@
+import React from 'react';
 import CSSMotion from 'rc-motion';
 import { genCSSMotion } from 'rc-motion/lib/CSSMotion';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import Modal from '..';
-import zhCN from '../../locale/zh_CN';
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import ConfigProvider from '../../config-provider';
 import Input from '../../input';
+import zhCN from '../../locale/zh_CN';
 import type { ModalFunc } from '../confirm';
 
 jest.mock('rc-util/lib/Portal');
@@ -410,10 +410,55 @@ describe('Modal.hook', () => {
     jest.useRealTimers();
   });
 
-  it('support await', async () => {
+  describe('support await', () => {
+    it('click', async () => {
+      jest.useFakeTimers();
+
+      let notReady = true;
+      let lastResult: boolean | null = null;
+
+      const Demo: React.FC = () => {
+        const [modal, contextHolder] = Modal.useModal();
+
+        React.useEffect(() => {
+          (async () => {
+            lastResult = await modal.confirm({
+              content: <Input />,
+              onOk: async () => {
+                if (notReady) {
+                  notReady = false;
+                  return Promise.reject();
+                }
+              },
+            });
+          })();
+        }, []);
+
+        return contextHolder;
+      };
+
+      render(<Demo />);
+
+      // Wait for modal show
+      await waitFakeTimer();
+
+      // First time click should not close
+      fireEvent.click(document.querySelector('.ant-btn-primary')!);
+      await waitFakeTimer();
+      expect(lastResult).toBeFalsy();
+
+      // Second time click to close
+      fireEvent.click(document.querySelector('.ant-btn-primary')!);
+      await waitFakeTimer();
+      expect(lastResult).toBeTruthy();
+
+      jest.useRealTimers();
+    });
+  });
+
+  it('esc', async () => {
     jest.useFakeTimers();
 
-    let notReady = true;
     let lastResult: boolean | null = null;
 
     const Demo: React.FC = () => {
@@ -423,12 +468,6 @@ describe('Modal.hook', () => {
         (async () => {
           lastResult = await modal.confirm({
             content: <Input />,
-            onOk: async () => {
-              if (notReady) {
-                notReady = false;
-                return Promise.reject();
-              }
-            },
           });
         })();
       }, []);
@@ -441,16 +480,13 @@ describe('Modal.hook', () => {
     // Wait for modal show
     await waitFakeTimer();
 
-    // First time click should not close
-    fireEvent.click(document.querySelector('.ant-btn-primary')!);
-    await waitFakeTimer();
-    expect(lastResult).toBeFalsy();
-
-    // Second time click to close
-    fireEvent.click(document.querySelector('.ant-btn-primary')!);
+    // ESC to close
+    fireEvent.keyDown(document.querySelector('.ant-modal')!, {
+      key: 'Esc',
+      keyCode: KeyCode.ESC,
+    });
     await waitFakeTimer();
-    expect(lastResult).toBeTruthy();
 
-    jest.useRealTimers();
+    expect(lastResult).toBe(false);
   });
 });