fix(pro:search): searchItem mousedown doesn't trigger focused (#1368)

IDuxFE · Dec 23, 2022 · 14637be · 14637be
1 parent c2288d5
commit 14637be
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -98,6 +98,17 @@ export default defineComponent({
         zIndex: currentZIndex.value,
       }),
     )
+    const searchItemContainerStyle = computed(() => {
+      if (!focused.value) {
+        return normalizeStyle({
+          height: 0,
+          width: 0,
+          opacity: 0,
+        })
+      }
+
+      return undefined
+    })
 
     expose({ focus, blur })
 
@@ -167,7 +178,7 @@ export default defineComponent({
                 getKey={item => item.key}
                 maxLabel={props.maxLabel}
               />
-              <div class={`${prefixCls}-search-item-container`} v-show={focused.value}>
+              <div class={`${prefixCls}-search-item-container`} style={searchItemContainerStyle.value}>
                 {searchItems.value?.map(item => (
                   <SearchItemComp key={item.key} searchItem={item} />
                 ))}

diff --git a/packages/pro/search/src/composables/useFocusedState.ts b/packages/pro/search/src/composables/useFocusedState.ts
@@ -62,15 +62,20 @@ export function useFocusedState(
     setFocused(false)
   }
 
-  registerHandlers(elementRef, () => getContainerEl(commonOverlayProps.value.container), _handleFocus, handleBlur)
+  registerHandlers(elementRef, () => getContainerEl(commonOverlayProps.value), _handleFocus, handleBlur)
 
   return { focused, focus, blur }
 }
 
-function getContainerEl(containerProp: ɵOverlayProps['container']): HTMLElement | null {
-  const container = isFunction(containerProp) ? containerProp() : containerProp
+function getContainerEl(commonOverlayProps: ɵOverlayProps): HTMLElement | null {
+  const container = isFunction(commonOverlayProps.container)
+    ? commonOverlayProps.container()
+    : commonOverlayProps.container
+  const resolvedContainer = container ?? commonOverlayProps.containerFallback
 
-  return isString(container) ? document.querySelector(/^[.#]/.test(container) ? container : `.${container}`) : container
+  return isString(resolvedContainer)
+    ? document.querySelector(/^[.#]/.test(resolvedContainer) ? resolvedContainer : `.${resolvedContainer}`)
+    : resolvedContainer
 }
 
 function useFocusHandlers(

diff --git a/packages/pro/search/src/searchItem/SearchItem.tsx b/packages/pro/search/src/searchItem/SearchItem.tsx
@@ -54,7 +54,6 @@ export default defineComponent({
     const classes = computed(() => {
       return normalizeClass({
         [prefixCls.value]: true,
-        [`${prefixCls.value}-tag`]: !isActive.value,
         [`${prefixCls.value}-invalid`]: !!props.searchItem?.error,
       })
     })