fix: popup zIndex 设置错误 (#315)

Tencent · Jan 27, 2022 · aacb6f8 · aacb6f8
1 parent a7992a6
commit aacb6f8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -176,7 +176,7 @@
     "start-server-and-test": "^1.14.0",
     "tdesign-icons-view": "^0.0.1",
     "tdesign-publish-cli": "^0.0.9",
-    "tdesign-site-components": "~0.5.44",
+    "tdesign-site-components": "~0.5.52",
     "ts-jest": "^27.1.2",
     "ts-morph": "^13.0.02",
     "ts-node": "^10.4.0",

diff --git a/site/src/App.jsx b/site/src/App.jsx
@@ -85,7 +85,7 @@ function Components(props) {
         <td-doc-aside ref={tdDocAsideRef} title="React for Web">
           {versionOptions.length ? (
             <div slot="extra">
-              <Select value={version} options={versionOptions} onChange={changeVersion} />
+              <Select popupProps={{ zIndex: 800 }} value={version} options={versionOptions} onChange={changeVersion} />
             </div>
           ) : null}
         </td-doc-aside>

diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -119,9 +119,9 @@ const Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   const { styles, attributes } = popperRef.current;
 
   const defaultStyles = useMemo(() => {
-    if (triggerRef && typeof overlayStyle === 'function') return { ...overlayStyle(triggerRef), zIndex };
-    return { ...overlayStyle, zIndex };
-  }, [overlayStyle, zIndex, triggerRef]);
+    if (triggerRef && typeof overlayStyle === 'function') return { ...overlayStyle(triggerRef) };
+    return { ...overlayStyle };
+  }, [overlayStyle, triggerRef]);
 
   // 设置 style 决定展示与隐藏
   const overlayVisibleStyle: CSSProperties = defaultStyles;
@@ -165,7 +165,7 @@ const Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
           <CSSTransition in={visible} appear {...cssTransitionState.props}>
             <div
               ref={composeRefs(setOverlayRef, ref)}
-              style={styles.popper}
+              style={{ ...styles.popper, zIndex }}
               className={`${classPrefix}-popup`}
               {...attributes.popper}
               {...popupProps}