fix(comp:tree-select): removing item from selector doesn't uncheck tr…

…ee node (#1877)

packages/cdk/utils/src/tree.ts

@@ -36,13 +36,13 @@ export function traverseTree<V extends TreeTypeData<V, C>, C extends keyof V>(
 export function mapTree<V extends TreeTypeData<V, C>, R extends object, C extends keyof V>(
   data: V[],
   childrenKey: C,
-  mapFn: (item: V, parents: V[]) => R | undefined,
+  mapFn: (item: V, parents: V[], index: number) => R | undefined,
 ): (R & TreeTypeData<R, C>)[] {
   const map = (_data: V[], parents: V[]) => {
     const res: (TreeTypeData<R, C> & R)[] = []
     for (let idx = 0; idx < _data.length; idx++) {
       const item = _data[idx]
-      const mappedItem = mapFn(item, parents) as R & TreeTypeData<R, C>
+      const mappedItem = mapFn(item, parents, idx) as R & TreeTypeData<R, C>
       if (!mappedItem) {
         continue
       }

packages/components/tree-select/src/TreeSelect.tsx

@@ -45,6 +45,7 @@ export default defineComponent({
     const mergedLabelKey = computed(() => props.labelKey ?? config.labelKey)
 
     const triggerRef = ref<SelectorInstance>()
+    const treeRef = ref<TreeInstance>()
     const [inputValue, setInputValue] = useState('')
     const focus = () => triggerRef.value?.focus()
     const blur = () => triggerRef.value?.blur()
@@ -63,11 +64,11 @@ export default defineComponent({
     const { selectedValue, selectedNodes, changeSelected, handleRemove, handleClear } = useSelectedState(
       props,
       accessor,
+      treeRef,
       mergedNodeMap,
     )
     const [overlayOpened, setOverlayOpened] = useControlledProp(props, 'open', false)
 
-    const treeRef = ref<TreeInstance>()
     const scrollTo: VirtualScrollToFn = options => {
       treeRef.value?.scrollTo(options)
     }

packages/components/tree-select/src/composables/useSelectedState.ts

@@ -7,16 +7,16 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { type ComputedRef, computed, toRaw } from 'vue'
+import type { TreeInstance } from '@idux/components/tree'
+
+import { type ComputedRef, type Ref, computed, toRaw } from 'vue'
 
 import { type FormAccessor } from '@idux/cdk/forms'
 import { type VKey, callEmit, convertArray } from '@idux/cdk/utils'
 
 import { type MergedNode } from './useDataSource'
 import { type TreeSelectNode, type TreeSelectProps } from '../types'
 
-//import { generateOption } from '../utils/generateOption'
-
 export interface SelectedStateContext {
   selectedValue: ComputedRef<VKey[]>
   selectedNodes: ComputedRef<MergedNode[]>
@@ -28,6 +28,7 @@ export interface SelectedStateContext {
 export function useSelectedState(
   props: TreeSelectProps,
   accessor: FormAccessor,
+  treeRef: Ref<TreeInstance | undefined>,
   mergedNodeMap: ComputedRef<Map<VKey, MergedNode>>,
 ): SelectedStateContext {
   const selectedValue = computed(() => convertArray(accessor.value))
@@ -54,7 +55,7 @@ export function useSelectedState(
   }
 
   const handleRemove = (key: VKey) => {
-    setValue(selectedValue.value.filter(item => key !== item))
+    treeRef.value?._handleCheck(key)
   }
 
   const handleClear = (evt: MouseEvent) => {

packages/components/tree/__tests__/tree.spec.ts

@@ -193,16 +193,16 @@ describe('Tree', () => {
 
       const allNodes = wrapper.findAll('.ix-tree-node')
 
-      expect(allNodes[0].find('.ix-checkbox-checked').exists()).toBe(false)
+      expect(allNodes[0].find('.ix-checkbox-checked').exists()).toBe(true)
       expect(allNodes[1].find('.ix-checkbox-checked').exists()).toBe(true)
       // 0-1 exclude disabled
-      expect(allNodes[2].find('.ix-checkbox-checked').exists()).toBe(false)
+      expect(allNodes[2].find('.ix-checkbox-checked').exists()).toBe(true)
       expect(allNodes[3].find('.ix-checkbox-checked').exists()).toBe(true)
 
       // 0-0, unchecked
       await allNodes[1].find('input').setValue(false)
 
-      expect(onUpdateCheckedKeys).toBeCalledWith(['0-2'])
+      expect(onUpdateCheckedKeys).toBeCalledWith(['0-1', '0-2'])
 
       await wrapper.setProps({ checkedKeys: [] })
 
@@ -262,8 +262,8 @@ describe('Tree', () => {
       await wrapper.setProps({ checkedKeys: [] })
 
       expect(allNodes[0].find('.ix-checkbox-checked').exists()).toBe(false)
-      expect(allNodes[0].find('.ix-checkbox-checked').exists()).toBe(false)
-      expect(allNodes[0].find('.ix-checkbox-checked').exists()).toBe(false)
+      expect(allNodes[1].find('.ix-checkbox-checked').exists()).toBe(false)
+      expect(allNodes[2].find('.ix-checkbox-checked').exists()).toBe(false)
 
       //0, checked
       await allNodes[0].find('input').setValue(true)

packages/components/tree/src/Tree.tsx

@@ -62,21 +62,26 @@ export default defineComponent({
     const mergedShowLine = computed(() => props.showLine ?? config.showLine)
     const mergedBlocked = computed(() => props.blocked ?? config.blocked)
     const mergedCheckOnClick = computed(() => props.checkable && props.checkOnClick)
-    const { mergedNodes, mergedNodeMap } = useMergeNodes(props, mergedChildrenKey, mergedGetKey, mergedLabelKey)
+    const { mergedNodes, mergedNodeMap, parentKeyMap, depthMap, setLoadedNodes } = useMergeNodes(
+      props,
+      mergedChildrenKey,
+      mergedGetKey,
+      mergedLabelKey,
+    )
     const { searchedKeys } = useSearchable(props, mergedNodeMap, mergedLabelKey)
     const expandableContext = useExpandable(
       props,
       config,
       mergedChildrenKey,
-      mergedGetKey,
-      mergedLabelKey,
       mergedNodeMap,
       searchedKeys,
+      setLoadedNodes,
     )
     const flattedNodes = useFlattedNodes(mergedNodes, expandableContext, props, searchedKeys)
-    const checkableContext = useCheckable(props, mergedNodeMap)
+    const checkableContext = useCheckable(props, mergedNodes, mergedNodeMap, parentKeyMap, depthMap)
     const dragDropContext = useDragDrop(props, config, expandableContext)
     const selectableContext = useSelectable(props, mergedNodeMap)
+    const { handleCheck } = checkableContext
 
     provide(treeToken, {
       props,
@@ -155,6 +160,15 @@ export default defineComponent({
     const _getFlattedNodes = () => {
       return flattedNodes.value
     }
+    const _handleCheck = (key: VKey) => {
+      const node = mergedNodeMap.value.get(key)
+
+      if (!node) {
+        return
+      }
+
+      handleCheck(node)
+    }
 
     expose({
       focus,
@@ -166,6 +180,7 @@ export default defineComponent({
 
       // private
       _getFlattedNodes,
+      _handleCheck,
     })
 
     const handleScrolledChange = (startIndex: number, endIndex: number, visibleNodes: MergedNode[]) => {