diff --git a/components/popconfirm/__tests__/index.test.tsx b/components/popconfirm/__tests__/index.test.tsx
index 2d6f11e080..dc66d15fc8 100644
--- a/components/popconfirm/__tests__/index.test.tsx
+++ b/components/popconfirm/__tests__/index.test.tsx
@@ -5,6 +5,7 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button';
+import { Select } from 'antd';
describe('Popconfirm', () => {
mountTest(Popconfirm);
@@ -322,4 +323,32 @@ describe('Popconfirm', () => {
expect(onOpenChange).toHaveBeenCalledTimes(1);
expect(onVisibleChange).toHaveBeenCalledTimes(1);
});
+ it('z-index should be accumulated in nested Popconfirm', () => {
+ const options = [
+ {
+ label: 'Option 1',
+ value: '1',
+ },
+ {
+ label: 'Option 2',
+ value: '2',
+ },
+ ];
+ render(
+ <>
+
+
+
+
+
+
+
+ >,
+ );
+ expect((document.querySelector('.test1') as HTMLDivElement)!.style.zIndex).toBeFalsy();
+ expect((document.querySelector('.test2') as HTMLDivElement)!.style.zIndex).toBe('2120');
+ expect((document.querySelector('.select0') as HTMLDivElement)!.style.zIndex).toBeFalsy();
+ expect((document.querySelector('.select1') as HTMLDivElement)!.style.zIndex).toBe('1110');
+ expect((document.querySelector('.select2') as HTMLDivElement)!.style.zIndex).toBe('2170');
+ });
});
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index ebc2d6f1ac..2c07486786 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -1,11 +1,14 @@
+import * as React from 'react';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import classNames from 'classnames';
-import KeyCode from 'rc-util/lib/KeyCode';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import KeyCode from 'rc-util/lib/KeyCode';
import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
import type { RenderFunction } from '../_util/getRenderPropValue';
+import { useZIndex } from '../_util/hooks/useZIndex';
import { cloneElement } from '../_util/reactNode';
+import zIndexContext from '../_util/zindexContext';
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { ConfigContext } from '../config-provider';
import Popover from '../popover';
@@ -96,37 +99,43 @@ const Popconfirm = React.forwardRef((props, ref) =>
const [wrapSSR] = usePopconfirmStyle(prefixCls);
+ // ============================ zIndex ============================
+ const [zIndex, contextZIndex] = useZIndex('Popconfirm', props.zIndex);
+
return wrapSSR(
-
- }
- data-popover-inject
- >
- {cloneElement(children, {
- onKeyDown: (e: React.KeyboardEvent) => {
- if (React.isValidElement(children)) {
- children?.props.onKeyDown?.(e);
- }
- onKeyDown(e);
- },
- })}
- ,
+
+
+ }
+ data-popover-inject
+ >
+ {cloneElement(children, {
+ onKeyDown: (e: React.KeyboardEvent) => {
+ if (React.isValidElement(children)) {
+ children?.props.onKeyDown?.(e);
+ }
+ onKeyDown(e);
+ },
+ })}
+
+ ,
);
}) as React.ForwardRefExoticComponent<
React.PropsWithoutRef & React.RefAttributes