From bea33dccbeb57038fdfd12dd00c1733bd01f8b50 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Wed, 14 Sep 2022 10:36:01 +0800
Subject: [PATCH] fix(comp:cascader): update overlay position after edging

---
 packages/cdk/click-outside/docs/Api.zh.md          |  2 --
 packages/cdk/popper/src/types.ts                   |  2 +-
 packages/components/cascader/src/Cascader.tsx      |  1 +
 .../cascader/src/contents/OverlayContent.tsx       |  7 ++++++-
 packages/components/cascader/src/token.ts          |  1 +
 .../select/src/composables/useOverlayState.ts      | 14 +++++++++-----
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/cdk/click-outside/docs/Api.zh.md b/packages/cdk/click-outside/docs/Api.zh.md
index 313565f96..12eecd517 100644
--- 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
index 90f0037d1..92ab057b7 100644
--- 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
index b801bc3e9..e5450b9af 100644
--- 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
index dc6504e52..ba9762a7c 100644
--- 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
index 41e5cd887..9183bf450 100644
--- 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
index 4d12ffd29..a95230a27 100644
--- 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()
     }
   }