feat(tree): auto expand parent on set current key and node (#1502) (#1508)

* fix(tree): auto expand parent on set current key and node (#1502)

* feat: expose expand-on-highlight-node prop

* Revert "feat: expose expand-on-highlight-node prop"

This reverts commit 9694825e0132522f1a4907d0c7bd91c4bd73b5aa.

* feat: add shouldAutoExpandParent parameter

* test: add tests

* docs: add parameter

* fix: it should only expand parent

* docs: update

* fix: it should only expand parent

packages/tree/__tests__/tree.spec.ts

@@ -441,6 +441,41 @@ describe('Tree.vue', () => {
     expect(tree.store.currentNode).toEqual(null)
   })
 
+  test('setCurrentKey should also auto expand parent', async () => {
+    const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
+    const treeWrapper = wrapper.findComponent(Tree)
+    const tree = treeWrapper.vm
+
+    tree.setCurrentKey(111)
+    await nextTick()
+    expect(wrapper.find('.is-current').exists()).toBeTruthy()
+
+    tree.setCurrentKey(null)
+    await nextTick()
+    expect(wrapper.find('.is-current').exists()).toBeFalsy()
+  })
+
+  test('setCurrentKey should not expand self', async () => {
+    const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
+    const treeWrapper = wrapper.findComponent(Tree)
+    const tree = treeWrapper.vm
+
+    tree.setCurrentKey(1)
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(0)
+
+    tree.setCurrentKey(11)
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1二级 1-1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(1)
+
+    tree.setCurrentKey(111)
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1二级 1-1三级 1-1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(2)
+  })
+
   test('setCurrentNode', async () => {
     const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
     const treeWrapper = wrapper.findComponent(Tree)
@@ -456,6 +491,53 @@ describe('Tree.vue', () => {
     expect(tree.store.currentNode).toEqual(null)
   })
 
+  test('setCurrentNode should also auto expand parent', async () => {
+    const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
+    const treeWrapper = wrapper.findComponent(Tree)
+    const tree = treeWrapper.vm
+
+    tree.setCurrentNode({
+      id: 111,
+      label: '三级 1-1',
+    })
+    await nextTick()
+    expect(wrapper.find('.is-current').exists()).toBeTruthy()
+
+    tree.setCurrentKey(null)
+    await nextTick()
+    expect(wrapper.find('.is-current').exists()).toBeFalsy()
+  })
+
+  test('setCurrentNode should not expand self', async () => {
+    const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
+    const treeWrapper = wrapper.findComponent(Tree)
+    const tree = treeWrapper.vm
+
+    tree.setCurrentNode({
+      id: 1,
+      label: '一级 1-1',
+    })
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(0)
+
+    tree.setCurrentNode({
+      id: 11,
+      label: '二级 1-1',
+    })
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1二级 1-1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(1)
+
+    tree.setCurrentNode({
+      id: 111,
+      label: '三级 1-1',
+    })
+    await sleep(100)
+    expect(wrapper.text()).toBe('一级 1二级 1-1三级 1-1一级 2一级 3')
+    expect(wrapper.findAll('.is-expanded')).toHaveLength(2)
+  })
+
   test('getCurrentKey', async () => {
     const { wrapper } = getTreeVm(`:props="defaultProps" show-checkbox node-key="id"`)
     const treeWrapper = wrapper.findComponent(Tree)

packages/tree/src/model/tree-store.ts

@@ -354,13 +354,16 @@ export default class TreeStore {
     this.currentNode.isCurrent = true
   }
 
-  setUserCurrentNode(node: Node): void {
+  setUserCurrentNode(node: Node, shouldAutoExpandParent = true): void {
     const key = node[this.key]
     const currNode = this.nodesMap[key]
     this.setCurrentNode(currNode)
+    if (shouldAutoExpandParent && this.currentNode.level > 1) {
+      this.currentNode.parent.expand(null, true)
+    }
   }
 
-  setCurrentNodeKey(key: TreeKey): void {
+  setCurrentNodeKey(key: TreeKey, shouldAutoExpandParent = true): void {
     if (key === null || key === undefined) {
       this.currentNode && (this.currentNode.isCurrent = false)
       this.currentNode = null
@@ -369,6 +372,9 @@ export default class TreeStore {
     const node = this.getNode(key)
     if (node) {
       this.setCurrentNode(node)
+      if (shouldAutoExpandParent && this.currentNode.level > 1) {
+        this.currentNode.parent.expand(null, true)
+      }
     }
   }
 }

packages/tree/src/tree.vue

@@ -253,14 +253,14 @@ export default defineComponent({
       return store.value.getHalfCheckedKeys()
     }
 
-    const setCurrentNode = (node: Node) => {
+    const setCurrentNode = (node: Node, shouldAutoExpandParent = true) => {
       if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode')
-      store.value.setUserCurrentNode(node)
+      store.value.setUserCurrentNode(node, shouldAutoExpandParent)
     }
 
-    const setCurrentKey = (key: TreeKey) => {
+    const setCurrentKey = (key: TreeKey, shouldAutoExpandParent = true) => {
       if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey')
-      store.value.setCurrentNodeKey(key)
+      store.value.setCurrentNodeKey(key, shouldAutoExpandParent)
     }
 
     const getNode = (data: TreeKey | TreeNodeData): Node => {

website/docs/en-US/tree.md

@@ -832,8 +832,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
 | getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
 | getCurrentNode  | return the highlight node's data (null if no node is highlighted) | — |
-| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
-| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
+| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key, shouldAutoExpandParent=true) 1. the node's key to be highlighted. If `null`, cancel the currently highlighted node 2. whether to automatically expand parent node |
+| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node, shouldAutoExpandParent=true) 1. the node to be highlighted 2. whether to automatically expand parent node |
 | getNode         | get node by data or key | (data) the node's data or key |
 | remove          | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
 | append          | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |

website/docs/es/tree.md

@@ -832,8 +832,8 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |
 | getCurrentKey     | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | —                                        |
 | getCurrentNode    | devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado) | —                                        |
-| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados |
-| setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado              |
+| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key, shouldAutoExpandParent=true) 1. la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados 2. whether to automatically expand parent node |
+| setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node, shouldAutoExpandParent=true) 1. nodo a ser resaltado 2. whether to automatically expand parent node |
 | getNode         | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
 | remove          | elimina un nodo, solo funciona si `node-key` está asignado  | (data) los datos del nodo o nodo a borrar |
 | append          | añadir un nodo hijo a un nodo determinado del árbol | (data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo |

website/docs/fr-FR/tree.md

@@ -839,8 +839,8 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
 | getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |
 | getCurrentKey   | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
 | getCurrentNode  | retourne les données du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
-| setCurrentKey   | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key) la clé du noeud. Si `null`, annule la sélection actuelle. |
-| setCurrentNode  | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node) le noeud. |
+| setCurrentKey   | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key, shouldAutoExpandParent=true) 1. la clé du noeud. Si `null`, annule la sélection actuelle. 2. whether to automatically expand parent node |
+| setCurrentNode  | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node, shouldAutoExpandParent=true) 1. le noeud. 2. whether to automatically expand parent node |
 | getNode         | Retourne le noeud grâce à sa clé ou ses données. | (data) la clé ou les données du noeud. |
 | remove          | Supprime un noeud, ne marche que si node-key est assigné. | (data) le noeud ou ses données à supprimer. |
 | append          | Ajoute un noeud à un autre noeud. | (data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données. |

website/docs/jp/tree.md

@@ -709,8 +709,8 @@
 | getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
 | getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
 | getCurrentNode  | return the highlight node's data (null if no node is highlighted) | — |
-| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
-| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
+| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key, shouldAutoExpandParent=true) 1. the node's key to be highlighted. If `null`, cancel the currently highlighted node 2. whether to automatically expand parent node |
+| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node, shouldAutoExpandParent=true) 1. the node to be highlighted 2. whether to automatically expand parent node |
 | getNode         | get node by data or key | (data) the node's data or key |
 | remove          | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
 | append          | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |

website/docs/zh-CN/tree.md

@@ -844,8 +844,8 @@
 | getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |
 | getCurrentKey   | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |
 | getCurrentNode  | 获取当前被选中节点的 data，若没有节点被选中则返回 null | — |
-| setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
-| setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
+| setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key, shouldAutoExpandParent=true) 1. 待被选节点的 key，若为 null 则取消当前高亮的节点 2. 是否扩展父节点 |
+| setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node, shouldAutoExpandParent=true) 1. 待被选节点的 node 2. 是否扩展父节点 |
 | getNode         | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |
 | remove          | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性  | (data) 要删除的节点的 data 或者 node |
 | append          | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node |