fix(comp:cascader): update overlay position after edging

IDuxFE · Sep 14, 2022 · bea33dc · bea33dc
1 parent 7365dcc
commit bea33dc
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git a/packages/cdk/click-outside/docs/Api.zh.md b/packages/cdk/click-outside/docs/Api.zh.md
@@ -29,8 +29,6 @@ export type ClickOutsideHandler = (evt: MouseEvent) => void
 
 ### useClickOutside
 
-对 [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 的进一步封装。
-
 ```ts
 /**
  * 为除了特定元素外添加全局点击事件

diff --git a/packages/cdk/popper/src/types.ts b/packages/cdk/popper/src/types.ts
@@ -112,7 +112,7 @@ export interface PopperInstance<TE extends PopperElement = PopperElement, PE ext
   /**
    * Update popper.
    */
-  update(options: Partial<PopperOptions>): void
+  update(options?: Partial<PopperOptions>): void
   /**
    * Force update popper
    */

diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
@@ -111,6 +111,7 @@ export default defineComponent({
       setInputValue,
       overlayOpened,
       setOverlayOpened,
+      updateOverlay,
       mergedData,
       mergedDataMap,
       ...activeStateContext,

diff --git a/packages/components/cascader/src/contents/OverlayContent.tsx b/packages/components/cascader/src/contents/OverlayContent.tsx
@@ -7,7 +7,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { type VNode, computed, defineComponent, inject } from 'vue'
+import { type VNode, computed, defineComponent, inject, watch } from 'vue'
 
 import { callEmit } from '@idux/cdk/utils'
 import { ɵInput } from '@idux/components/_private/input'
@@ -27,6 +27,7 @@ export default defineComponent({
       expandedKeys,
       inputValue,
       setInputValue,
+      updateOverlay,
     } = inject(cascaderToken)!
 
     const contentData = computed(() => {
@@ -41,6 +42,10 @@ export default defineComponent({
       return dataSource
     })
 
+    watch([() => contentData.value.length, inputValue], () => {
+      updateOverlay()
+    })
+
     const handleInput = (evt: Event) => {
       const { value } = evt.target as HTMLInputElement
       setInputValue(value)

diff --git a/packages/components/cascader/src/token.ts b/packages/components/cascader/src/token.ts
@@ -39,6 +39,7 @@ export interface CascaderContext
   setInputValue: (value: string) => void
   overlayOpened: ComputedRef<boolean>
   setOverlayOpened: (open: boolean) => void
+  updateOverlay: () => void
 }
 
 export const cascaderToken: InjectionKey<CascaderContext> = Symbol('cascaderToken')
diff --git a/packages/components/select/src/composables/useOverlayState.ts b/packages/components/select/src/composables/useOverlayState.ts
@@ -14,7 +14,7 @@ import { type ɵSelectorInstance } from '@idux/components/_private/selector'
 export interface OverlayStateContext {
   overlayRef: Ref<ɵOverlayInstance | undefined>
   overlayStyle: ComputedRef<CSSProperties>
-  updateOverlay: (rect: DOMRect) => void
+  updateOverlay: (rect?: DOMRect) => void
   overlayOpened: ComputedRef<boolean>
   setOverlayOpened: (open: boolean) => void
 }
@@ -36,10 +36,14 @@ export function useOverlayState(
   })
   const [overlayOpened, setOverlayOpened] = useControlledProp(props, 'open', false)
 
-  const updateOverlay = (rect: DOMRect) => {
-    const { width } = rect
-    if (width > 0) {
-      setOverlayWidth(convertCssPixel(width))
+  const updateOverlay = (rect?: DOMRect) => {
+    if (rect) {
+      const { width } = rect
+      if (width > 0) {
+        setOverlayWidth(convertCssPixel(width))
+        overlayOpened.value && overlayRef.value?.updatePopper()
+      }
+    } else {
       overlayOpened.value && overlayRef.value?.updatePopper()
     }
   }