fix: optimize ESC key handling in nested portal scenarios

Author: aojunhao123

docs/examples/nested.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Button, Divider } from 'antd';
 import Dialog from '@rc-component/dialog';
 import Image from '@rc-component/image';
 import '@rc-component/dialog/assets/index.css';
@@ -9,13 +8,13 @@ const App: React.FC = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-      <Button
+      <button
         onClick={() => {
           setShow(true);
         }}
       >
         showModal
-      </Button>
+      </button>
       <Dialog
         visible={show}
         afterOpenChange={open => {
@@ -26,21 +25,20 @@ const App: React.FC = () => {
         }}
         footer={
           <>
-            <Button
+            <button
               onClick={() => {
                 setShow(false);
               }}
             >
               Cancel
-            </Button>
-            <Button
-              type="primary"
+              </button>
+            <button
               onClick={() => {
                 setShow(false);
               }}
             >
               OK
-            </Button>
+            </button>
           </>
         }
       >
@@ -49,7 +47,6 @@ const App: React.FC = () => {
           alt="svg image"
           src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
         />
-        <Divider />
         <Image.PreviewGroup
           preview={{
             onChange: (current, prev) =>

src/Preview/index.tsx

@@ -332,10 +332,6 @@ const Preview: React.FC<PreviewProps> = props => {
     if (open) {
       const { keyCode } = event;
 
-      if (keyCode === KeyCode.ESC) {
-        onClose?.();
-      }
-
       if (showLeftOrRightSwitches) {
         if (keyCode === KeyCode.LEFT) {
           onActive(-1);
@@ -380,6 +376,12 @@ const Preview: React.FC<PreviewProps> = props => {
     }
   }, [open]);
 
+  const onEsc: PortalProps['onEsc'] = ({ top }) => {
+    if (top) {
+      onClose?.();
+    }
+  };
+
   // ========================== Render ==========================
   const bodyStyle: React.CSSProperties = {
     ...styles.body,
@@ -389,7 +391,13 @@ const Preview: React.FC<PreviewProps> = props => {
   }
 
   return (
-    <Portal open={portalRender} getContainer={getContainer} autoLock={lockScroll}>
+    <Portal
+      open={portalRender && open}
+      autoDestroy={false}
+      getContainer={getContainer}
+      autoLock={lockScroll}
+      onEsc={onEsc}
+    >
       <CSSMotion
         motionName={motionName}
         visible={portalRender && open}

tests/preview.test.tsx

@@ -7,7 +7,8 @@ import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
 import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
+import Dialog from '@rc-component/dialog';
 
 jest.mock('../src/Preview', () => {
   const MockPreview = (props: any) => {
@@ -1052,6 +1053,39 @@ describe('Preview', () => {
     expect(afterOpenChange).toHaveBeenCalledTimes(2);
   });
 
+  it('Esc closes preview then modal', () => {
+    function NestedTestDemo({ onClose }: { onClose: () => void }) {
+      const [visible, setVisible] = useState(false);
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setVisible(true)}>open</button>
+          <Dialog visible={visible} onClose={onClose}>
+            <Image
+              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              preview={{ open, onOpenChange: setOpen }}
+            />
+          </Dialog>
+        </>
+      );
+    }
+
+    const onClose = jest.fn();
+    const { baseElement, getByRole } = render(<NestedTestDemo onClose={onClose} />);
+
+    fireEvent.click(getByRole('button'));
+    expect(getByRole('dialog')).toBeTruthy();
+
+    fireEvent.click(getByRole('img'));
+    expect(baseElement.querySelector('.rc-image-preview')).toBeTruthy();
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(baseElement.querySelector('.rc-image-preview')).toBeFalsy();
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it('not modify preview image size', () => {
     render(
       <Image

tsconfig.json

@@ -11,6 +11,7 @@
       "@/*": ["src/*"],
       "@@/*": [".dumi/tmp/*"],
       "@rc-component/image": ["src/index.ts"]
-    }
+    },
+    "types": ["@testing-library/jest-dom", "jest", "node"]
   }
 }