fix(pro:search): overlay zIndex should be larger than container (#1389)

IDuxFE · Jan 6, 2023 · 81ff47e · 81ff47e
1 parent 796bfaf
commit 81ff47e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -137,6 +137,7 @@ export default defineComponent({
       locale: locale.search,
       mergedPrefixCls,
       commonOverlayProps,
+      focused,
 
       ...searchStateContext,
       ...activeSegmentContext,

diff --git a/packages/pro/search/src/searchItem/Segment.tsx b/packages/pro/search/src/searchItem/Segment.tsx
@@ -32,7 +32,7 @@ export default defineComponent({
   props: segmentProps,
   setup(props: SegmentProps) {
     const context = inject(proSearchContext)!
-    const { mergedPrefixCls, commonOverlayProps, activeSegment, searchStates, setActiveSegment } = context
+    const { mergedPrefixCls, commonOverlayProps, focused, activeSegment, searchStates, setActiveSegment } = context
     const overlayRef = ref<ɵOverlayInstance>()
     const segmentInputRef = ref<HTMLInputElement>()
     const measureSpanRef = ref<HTMLSpanElement>()
@@ -59,7 +59,7 @@ export default defineComponent({
     const isActive = computed(
       () => activeSegment.value?.itemKey === props.itemKey && activeSegment.value.name === props.segment.name,
     )
-    const overlayOpened = computed(() => isActive.value && !!activeSegment.value?.overlayOpened)
+    const overlayOpened = computed(() => focused.value && isActive.value && !!activeSegment.value?.overlayOpened)
 
     const inputWidth = useInputWidth(measureSpanRef)
     const inputStyle = computed(() => ({
@@ -170,12 +170,8 @@ export default defineComponent({
       ></input>
     )
 
-    const renderContent = () => {
-      if (!overlayOpened.value) {
-        return
-      }
-
-      const renderedContent = props.segment.panelRenderer?.({
+    const renderContent = () =>
+      props.segment.panelRenderer?.({
         input: props.input ?? '',
         value: props.value,
         cancel: handleCancel,
@@ -184,9 +180,6 @@ export default defineComponent({
         setOnKeyDown: setPanelOnKeyDown,
       })
 
-      return renderedContent
-    }
-
     return () => {
       const { panelRenderer } = props.segment
       const prefixCls = `${mergedPrefixCls.value}-segment`

diff --git a/packages/pro/search/src/token.ts b/packages/pro/search/src/token.ts
@@ -21,6 +21,7 @@ export interface ProSearchContext extends SearchStateContext, ActiveSegmentConte
   locale: ProSearchLocale
   mergedPrefixCls: ComputedRef<string>
   commonOverlayProps: ComputedRef<ɵOverlayProps>
+  focused: ComputedRef<boolean>
 }
 
 export interface SearchItemContext extends SegmentOverlayUpdateContext, SegmentStatesContext {}