fix: optimize ESC key handling in nested portal scenarios (#494)

* add reproduce demo

* chore: adjust

* fix: optimize ESC key handling in nested portal scenarios

* chore: adjust test

* update

Author: aojunhao123

.gitignore

@@ -44,4 +44,5 @@ es/
 .dumi/tmp
 .dumi/tmp-production
 
-bun.lockb
+bun.lockb
+.vscode

assets/preview.less

@@ -5,6 +5,7 @@
   overflow: hidden;
   user-select: none;
   inset: 0;
+  z-index: 1055;
 
   &-mask {
     position: absolute;

docs/demo/nested.md

@@ -0,0 +1,8 @@
+---
+title: nested
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/nested.tsx"></code>

docs/examples/nested.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import Dialog from '@rc-component/dialog';
+import Image from '@rc-component/image';
+import '@rc-component/dialog/assets/index.css';
+import '../../assets/index.less';
+
+const App: React.FC = () => {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => {
+          setShow(true);
+        }}
+      >
+        showModal
+      </button>
+      <Dialog
+        visible={show}
+        afterOpenChange={open => {
+          setShow(open);
+        }}
+        onClose={() => {
+          setShow(false);
+        }}
+        footer={
+          <>
+            <button
+              onClick={() => {
+                setShow(false);
+              }}
+            >
+              Cancel
+              </button>
+            <button
+              onClick={() => {
+                setShow(false);
+              }}
+            >
+              OK
+            </button>
+          </>
+        }
+      >
+        <Image
+          width={200}
+          alt="svg image"
+          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+        />
+        <Image.PreviewGroup
+          preview={{
+            onChange: (current, prev) =>
+              console.log(`current index: ${current}, prev index: ${prev}`),
+          }}
+        >
+          <Image
+            width={200}
+            alt="svg image"
+            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          />
+          <Image
+            width={200}
+            src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+          />
+        </Image.PreviewGroup>
+      </Dialog>
+    </>
+  );
+};
+
+export default App;

package.json

@@ -41,14 +41,15 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.0.0",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.1.2",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.0",
+    "@rc-component/dialog": "^1.7.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^15.0.6",
     "@types/jest": "^30.0.0",

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,25 @@ describe('Preview', () => {
     expect(afterOpenChange).toHaveBeenCalledTimes(2);
   });
 
+  it('Esc closes preview then modal', () => {
+    const onClose = jest.fn();
+
+    const { baseElement, getByRole } = render(
+      <Dialog visible onClose={onClose}>
+        <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+      </Dialog>,
+    );
+
+    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"]
   }
 }