fix(comp:cascader): when children changed,the scrollbar should be pin…

…ned (#1353)

fix #1316

packages/components/cascader/src/composables/useExpandable.ts

@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type ComputedRef, type Ref, type WritableComputedRef, ref } from 'vue'
+import { type ComputedRef, type Ref, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
@@ -17,7 +17,7 @@ import { callChange, getParentKeys } from '../utils'
 import { type MergedData, convertMergedData, convertMergedDataMap } from './useDataSource'
 
 export interface ExpandableContext {
-  expandedKeys: WritableComputedRef<VKey[]>
+  expandedKeys: ComputedRef<VKey[]>
   handleExpand: (key: VKey) => void
   loadingKeys: Ref<VKey[]>
 }

packages/components/cascader/src/contents/OverlayContent.tsx

@@ -9,7 +9,7 @@
 
 import { type VNode, computed, defineComponent, inject, watch } from 'vue'
 
-import { callEmit } from '@idux/cdk/utils'
+import { type VKey, callEmit } from '@idux/cdk/utils'
 import { ɵInput } from '@idux/components/_private/input'
 
 import { cascaderToken } from '../token'
@@ -30,13 +30,14 @@ export default defineComponent({
       updateOverlay,
     } = inject(cascaderToken)!
 
+    const defaultKey = Symbol() as VKey
     const contentData = computed(() => {
-      const dataSource = [mergedData.value]
+      const dataSource = [{ key: defaultKey, dataSource: mergedData.value }]
       const dataMap = mergedDataMap.value
       expandedKeys.value.forEach(key => {
         const currData = dataMap.get(key)
         if (currData && currData.children) {
-          dataSource.push(currData.children)
+          dataSource.push({ key, dataSource: currData.children })
         }
       })
       return dataSource
@@ -79,7 +80,7 @@ export default defineComponent({
       const contentNode = searchValue ? (
         <OverlayOptionGroup dataSource={searchedData.value} />
       ) : (
-        contentData.value.map((dataSource, index) => <OverlayOptionGroup key={index} dataSource={dataSource} />)
+        contentData.value.map(item => <OverlayOptionGroup {...item} />)
       )
       children.push(
         <div key="__content" class={`${prefixCls}-overlay-content`}>

packages/site/src/docs/Faq.zh.md

@@ -30,7 +30,15 @@ order: 10
 
 可以通过设置 `overlayContainer` 来解决，把浮层插入到当前的 `DOM` 内，而不是默认的 `body` 上。  
 例如你可以设置 `<IxSelect :overlayContainer='trigger => trigger.parentElement' />` 在 Popover 中渲染下拉框组件。  
-你也可以通过在全局配置中设置来进行全局覆盖，例如：`useGlobalConfig('common', { overlayContainer: element => element?.parentElement })`，需要特别注意的是，这里的 `element` 可能为空，因为该配置对于 `Modal, Drawer` 等组件同样生效，此类组件不存在 `trigger` 元素。
+你也可以通过在全局配置中设置来进行全局覆盖，例如：
+
+```ts
+
+// 需要特别注意的是，这里的 `trigger` 可能为空，因为该配置对于 `Modal, Drawer` 等组件同样生效，此类组件不存在 `trigger` 元素。
+const overlayContainer = (trigger?: Element) => trigger?.parentElement
+// 也可以在局部组件中使用 useGlobalConfig 来设置
+createGlobalConfig({ common: { overlayContainer } })
+```
 
 ## 如何自定义控制浮层的 `z-index`? 通常在与其他组件库混用，或者使用了微前端框架的情况下需要。
 
@@ -40,8 +48,9 @@ order: 10
 ```ts
 const initZIndex = 1000
 const indexCount = 0
-const customGetZIndex = () => initZIndex + indexCount++
-useGlobalConfig('common', { overlayZIndex: customGetZIndex })
+const overlayZIndex = () => initZIndex + indexCount++
+// 也可以在局部组件中使用 useGlobalConfig 来设置
+createGlobalConfig({ common: { overlayZIndex } })
 ```
 
 ## 图标不显示？如何更新图标？