fix: Fixed image preview in a nested modal where z-index Settings did not meet expectations (#45979)

components/_util/__tests__/useZIndex.test.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
-import type { MenuProps } from 'antd';
+import type { ImageProps, MenuProps } from 'antd';
 import {
   AutoComplete,
   Cascader,
@@ -9,6 +9,7 @@ import {
   DatePicker,
   Drawer,
   Dropdown,
+  Image,
   Menu,
   Modal,
   Popconfirm,
@@ -178,6 +179,15 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
     </>
   ),
   Menu: (props) => <Menu {...props} items={items} defaultOpenKeys={['SubMenu']} />,
+  ImagePreview: ({ rootClassName }: ImageProps) => (
+    <Image
+      src="xxx"
+      preview={{
+        visible: true,
+        rootClassName: `${rootClassName} comp-item comp-ImagePreview`,
+      }}
+    />
+  ),
 };
 
 function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): string {
@@ -196,6 +206,8 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st
       .join(',');
   } else if (['Menu'].includes(consumer)) {
     selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`;
+  } else if (consumer === 'ImagePreview') {
+    selector = `${baseSelector}.comp-ImagePreview`;
   }
   return selector;
 }

components/_util/hooks/useZIndex.tsx

@@ -5,7 +5,7 @@ import zIndexContext from '../zindexContext';
 
 export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
 
-export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';
+export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu' | 'ImagePreview';
 
 // Z-Index control range
 // Container: 1000 + offset 100 (max base + 10 * offset = 2000)
@@ -30,6 +30,7 @@ export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
   Dropdown: 50,
   DatePicker: 50,
   Menu: 50,
+  ImagePreview: 1,
 };
 
 function isContainerType(type: ZIndexContainer | ZIndexConsumer): type is ZIndexContainer {

components/image/index.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import RcImage from 'rc-image';
 import type { ImageProps } from 'rc-image';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
@@ -42,6 +43,11 @@ const Image: CompositionImage<ImageProps> = (props) => {
 
   const mergedClassName = classNames(className, hashId, image?.className);
 
+  const [zIndex] = useZIndex(
+    'ImagePreview',
+    typeof preview === 'object' ? preview.zIndex : undefined,
+  );
+
   const mergedPreview = React.useMemo(() => {
     if (preview === false) {
       return preview;
@@ -60,6 +66,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
       getContainer: getContainer || getContextPopupContainer,
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
+      zIndex,
     };
   }, [preview, imageLocale]);
 

package.json

@@ -133,7 +133,7 @@
     "rc-drawer": "~6.5.2",
     "rc-dropdown": "~4.1.0",
     "rc-field-form": "~1.40.0",
-    "rc-image": "~7.3.2",
+    "rc-image": "~7.4.0",
     "rc-input": "~1.3.6",
     "rc-input-number": "~8.4.0",
     "rc-mentions": "~2.9.1",