feat: Popconfirm support z-index manager (ant-design#45421)

* feat: Popconfirm support z-index manager * Update components/popconfirm/__tests__/index.test.tsx Signed-off-by: kiner-tang(文辉) <[email protected]> --------- Signed-off-by: kiner-tang(文辉) <[email protected]>
ammar-knowledge · Oct 20, 2023 · 0fd730a · 0fd730a
1 parent bff04cd
commit 0fd730a
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 32 deletions.
diff --git 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(
+      <>
+        <Select open options={options} popupClassName="select0" />
+        <Popconfirm open title="test1" rootClassName="test1">
+          <Select open options={options} popupClassName="select1" />
+          <Popconfirm open title="test2" rootClassName="test2">
+            <Select open options={options} popupClassName="select2" />
+          </Popconfirm>
+        </Popconfirm>
+      </>,
+    );
+    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
@@ -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<TooltipRef, PopconfirmProps>((props, ref) =>
 
   const [wrapSSR] = usePopconfirmStyle(prefixCls);
 
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Popconfirm', props.zIndex);
+
   return wrapSSR(
-    <Popover
-      {...omit(restProps, ['title'])}
-      trigger={trigger}
-      placement={placement}
-      onOpenChange={onInternalOpenChange}
-      open={open}
-      ref={ref}
-      overlayClassName={overlayClassNames}
-      content={
-        <Overlay
-          okType={okType}
-          icon={icon}
-          {...props}
-          prefixCls={prefixCls}
-          close={close}
-          onConfirm={onConfirm}
-          onCancel={onCancel}
-        />
-      }
-      data-popover-inject
-    >
-      {cloneElement(children, {
-        onKeyDown: (e: React.KeyboardEvent<any>) => {
-          if (React.isValidElement(children)) {
-            children?.props.onKeyDown?.(e);
-          }
-          onKeyDown(e);
-        },
-      })}
-    </Popover>,
+    <zIndexContext.Provider value={contextZIndex}>
+      <Popover
+        {...omit(restProps, ['title'])}
+        zIndex={zIndex}
+        trigger={trigger}
+        placement={placement}
+        onOpenChange={onInternalOpenChange}
+        open={open}
+        ref={ref}
+        overlayClassName={overlayClassNames}
+        content={
+          <Overlay
+            okType={okType}
+            icon={icon}
+            {...props}
+            prefixCls={prefixCls}
+            close={close}
+            onConfirm={onConfirm}
+            onCancel={onCancel}
+          />
+        }
+        data-popover-inject
+      >
+        {cloneElement(children, {
+          onKeyDown: (e: React.KeyboardEvent<any>) => {
+            if (React.isValidElement(children)) {
+              children?.props.onKeyDown?.(e);
+            }
+            onKeyDown(e);
+          },
+        })}
+      </Popover>
+    </zIndexContext.Provider>,
   );
 }) as React.ForwardRefExoticComponent<
   React.PropsWithoutRef<PopconfirmProps> & React.RefAttributes<unknown>