Fix popupStyle zIndex missing (#172)

* 🐛 Fix popupStyle zIndex not working

close ant-design/ant-design#21770

* fix unused state

Author: afc163

src/Popup.tsx

@@ -94,7 +94,6 @@ class Popup extends Component<PopupProps, PopupState> {
     targetHeight: undefined,
 
     status: null,
-    prevVisible: null,
     alignClassName: null,
   };
 
@@ -120,7 +119,8 @@ class Popup extends Component<PopupProps, PopupState> {
     } else if (visible !== prevVisible) {
       if (
         visible ||
-        (supportMotion(mergedMotion) && ['motion', 'AfterMotion', 'stable'].includes(status))
+        (supportMotion(mergedMotion) &&
+          ['motion', 'AfterMotion', 'stable'].includes(status))
       ) {
         newState.status = null;
       } else {
@@ -169,7 +169,13 @@ class Popup extends Component<PopupProps, PopupState> {
 
         default: {
           // Go to next status
-          const queue: PopupStatus[] = ['measure', 'align', null, 'beforeMotion', 'motion'];
+          const queue: PopupStatus[] = [
+            'measure',
+            'align',
+            null,
+            'beforeMotion',
+            'motion',
+          ];
           const index = queue.indexOf(status);
           const nextStatus = queue[index + 1];
           if (index !== -1 && nextStatus) {
@@ -291,16 +297,21 @@ class Popup extends Component<PopupProps, PopupState> {
 
     const mergedStyle: React.CSSProperties = {
       ...sizeStyle,
-      ...style,
       ...this.getZIndexStyle(),
+      ...style,
       opacity: status === 'stable' || !visible ? undefined : 0,
     };
 
     // ================= Motions =================
     const mergedMotion = this.getMotion();
     let mergedMotionVisible = visible;
 
-    if (visible && status !== 'beforeMotion' && status !== 'motion' && status !== 'stable') {
+    if (
+      visible &&
+      status !== 'beforeMotion' &&
+      status !== 'motion' &&
+      status !== 'stable'
+    ) {
       mergedMotion.motionAppear = false;
       mergedMotion.motionEnter = false;
       mergedMotion.motionLeave = false;
@@ -312,7 +323,8 @@ class Popup extends Component<PopupProps, PopupState> {
 
     // ================== Align ==================
     const mergedAlignDisabled =
-      !visible || (status !== 'align' && status !== 'aligned' && status !== 'stable');
+      !visible ||
+      (status !== 'align' && status !== 'aligned' && status !== 'stable');
 
     // ================== Popup ==================
     let mergedPopupVisible = true;
@@ -367,7 +379,14 @@ class Popup extends Component<PopupProps, PopupState> {
   };
 
   renderMaskElement = () => {
-    const { mask, maskMotion, maskTransitionName, maskAnimation, prefixCls, visible } = this.props;
+    const {
+      mask,
+      maskMotion,
+      maskTransitionName,
+      maskAnimation,
+      prefixCls,
+      visible,
+    } = this.props;
 
     if (!mask) {
       return null;

tests/basic.test.jsx

@@ -595,4 +595,23 @@ describe('Trigger.Basic', () => {
       .onDocumentClick({ target: wrapper.find('button').instance() });
     expect(wrapper.isHidden()).toBeFalsy();
   });
+
+  // https://github.com/ant-design/ant-design/issues/21770
+  it('support popupStyle, such as zIndex', () => {
+    const style = { color: 'red', zIndex: 9999, top: 100 };
+    const wrapper = mount(
+      <Trigger
+        popupVisible
+        popupStyle={style}
+        popup={<strong className="x-content">tooltip2</strong>}
+      >
+        <div className="target">click</div>
+      </Trigger>,
+    );
+
+    const popupDomNode = wrapper.instance().getPopupDomNode();
+    expect(popupDomNode.style.zIndex).toBe(style.zIndex.toString());
+    expect(popupDomNode.style.color).toBe(style.color);
+    expect(popupDomNode.style.top).toBe(`${style.top}px`);
+  });
 });