fix: Static method provides wrong zIndex context (ant-design#46012)

* fix: static confirm should has correct zIndex * test: update test case * chore: reorder * fix: bump logic
wanghui2021 · Nov 22, 2023 · 6aff196 · 6aff196
1 parent 5aafe6d
commit 6aff196
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 46 deletions.
diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
@@ -349,7 +349,7 @@ describe('Test useZIndex hooks', () => {
 
     const instance = Modal.confirm({
       title: 'bamboo',
-      content: 'little',
+      content: <Select open />,
     });
 
     await waitFakeTimer();
@@ -358,6 +358,10 @@ describe('Test useZIndex hooks', () => {
       zIndex: '2000',
     });
 
+    expect(document.querySelector('.ant-select-dropdown')).toHaveStyle({
+      zIndex: '2050',
+    });
+
     instance.destroy();
 
     await waitFakeTimer();

diff --git a/components/_util/hooks/useZIndex.tsx b/components/_util/hooks/useZIndex.tsx
@@ -44,7 +44,13 @@ export function useZIndex(
   const [, token] = useToken();
   const parentZIndex = React.useContext(zIndexContext);
   const isContainer = isContainerType(componentType);
+
+  if (customZIndex !== undefined) {
+    return [customZIndex, customZIndex];
+  }
+
   let zIndex = parentZIndex ?? 0;
+
   if (isContainer) {
     zIndex +=
       // Use preset token zIndex by default but not stack when has parent container

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -17,7 +17,7 @@ import OkBtn from './components/ConfirmOkBtn';
 import type { ModalContextProps } from './context';
 import { ModalContextProvider } from './context';
 import type { ModalFuncProps, ModalLocale } from './interface';
-import Dialog from './Modal';
+import Modal from './Modal';
 import ConfirmCmp from './style/confirmCmp';
 
 export interface ConfirmDialogProps extends ModalFuncProps {
@@ -233,7 +233,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
 
   // ========================= Render =========================
   return (
-    <Dialog
+    <Modal
       prefixCls={prefixCls}
       className={classString}
       wrapClassName={classNames(
@@ -269,7 +269,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       focusTriggerAfterClose={focusTriggerAfterClose}
     >
       <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
-    </Dialog>
+    </Modal>
   );
 };
 

diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -670,31 +670,60 @@ exports[`renders components/modal/demo/modal-render.tsx extend context correctly
 exports[`renders components/modal/demo/modal-render.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] = `
-<button
-  aria-checked="false"
-  class="ant-switch"
-  role="switch"
-  style="position: relative; z-index: 0;"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
 >
   <div
-    class="ant-switch-handle"
-  />
-  <span
-    class="ant-switch-inner"
+    class="ant-space-item"
   >
-    <span
-      class="ant-switch-inner-checked"
+    <button
+      aria-checked="false"
+      class="ant-switch"
+      role="switch"
+      style="position: relative; z-index: 0;"
+      type="button"
     >
-      Open
-    </span>
-    <span
-      class="ant-switch-inner-unchecked"
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          Open
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          Close
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
     >
-      Close
-    </span>
-  </span>
-</button>
+      <span>
+        Static
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+</div>
 `;
 
 exports[`renders components/modal/demo/nested.tsx extend context correctly 2`] = `[]`;

diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -640,31 +640,60 @@ exports[`renders components/modal/demo/modal-render.tsx correctly 1`] = `
 `;
 
 exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
-<button
-  aria-checked="false"
-  class="ant-switch"
-  role="switch"
-  style="position:relative;z-index:0"
-  type="button"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
 >
   <div
-    class="ant-switch-handle"
-  />
-  <span
-    class="ant-switch-inner"
+    class="ant-space-item"
   >
-    <span
-      class="ant-switch-inner-checked"
+    <button
+      aria-checked="false"
+      class="ant-switch"
+      role="switch"
+      style="position:relative;z-index:0"
+      type="button"
     >
-      Open
-    </span>
-    <span
-      class="ant-switch-inner-unchecked"
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          Open
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          Close
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
     >
-      Close
-    </span>
-  </span>
-</button>
+      <span>
+        Static
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+</div>
 `;
 
 exports[`renders components/modal/demo/position.tsx correctly 1`] = `

diff --git a/components/modal/demo/nested.tsx b/components/modal/demo/nested.tsx
@@ -18,14 +18,21 @@ const Demo: React.FC = () => {
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
+  const onShowStatic = () => {
+    Modal.confirm({
+      content: <Select open value="1" options={options} />,
+    });
+  };
+
   return (
-    <>
+    <Space>
       <Switch
         style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
         checkedChildren="Open"
         unCheckedChildren="Close"
         onChange={(open) => setIsModalOpen(open)}
       />
+      <Button onClick={onShowStatic}>Static</Button>
       <Modal
         title="Basic Modal"
         open={isModalOpen}
@@ -123,7 +130,7 @@ const Demo: React.FC = () => {
 
       {messageHolder}
       {notificationHolder}
-    </>
+    </Space>
   );
 };
 

diff --git a/scripts/post-script.ts b/scripts/post-script.ts
@@ -50,6 +50,7 @@ const DEPRECIATED_VERSION = {
   '5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'],
   '5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'],
   '5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'],
+  '5.11.2': ['https://github.com/ant-design/ant-design/issues/46005'],
 } as const;
 
 function matchDeprecated(v: string) {