Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(components): [tree] highlight the corresponding node after data reset #18578

Merged
merged 3 commits into from
Oct 23, 2024

Conversation

momei-LJM
Copy link
Contributor

@momei-LJM momei-LJM commented Oct 17, 2024

fix #18576

Copy link

👋 @momei-LJM, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

Copy link

github-actions bot commented Oct 17, 2024

Copy link

Hello @momei-LJM, thank you for contributing to element-plus, please see our guideline to see how to make contribution

Copy link

pkg-pr-new bot commented Oct 17, 2024

Open in Stackblitz

pnpm add https://pkg.pr.new/element-plus/element-plus@18578

commit: 8138e63

Copy link

github-actions bot commented Oct 17, 2024

🧪 Playground Preview: https://element-plus.run/?pr=18578
Please comment the example via this playground if needed.

@momei-LJM momei-LJM changed the title keep it highlighted when the tree reset fix(components): [tree] keep it highlighted when the tree reset Oct 18, 2024
Copy link
Member

@btea btea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a test case?

@warmthsea
Copy link
Collaborator

warmthsea commented Oct 22, 2024

@momei-LJM Can you add this code to tree.test.ts file?

data() {
   return {
+   currentId: null,
test('update tree-data after current-node-key', async () => {
    const { wrapper, vm } = getTreeVm(
      `:props="defaultProps" :expand-on-click-node="false" default-expand-all highlight-current node-key="id" :current-node-key="currentId"`
    )

    vm.currentId = 22
    await nextTick()
    const currentNodeLabelWrapper = wrapper.find(
      '.is-current .el-tree-node__label'
    )
    expect(wrapper.find('.el-tree--highlight-current').exists()).toBe(true)
    expect(currentNodeLabelWrapper.text()).toEqual('二级 2-2')
    const _data = [...vm.data]
    await nextTick()
    vm.data = [..._data]
    await nextTick()
    const currentNodeLabelWrapper2 = wrapper.find(
      '.is-current .el-tree-node__label'
    )
    expect(currentNodeLabelWrapper2.exists()).toBe(true)
    expect(currentNodeLabelWrapper2.text()).toEqual('二级 2-2')
    expect(wrapper.find('.el-tree--highlight-current').exists()).toBe(true)
})

@momei-LJM
Copy link
Contributor Author

@momei-LJM Can you add this code to tree.test.ts file?

data() {
   return {
+   currentId: null,
test('update tree-data after current-node-key', async () => {
    const { wrapper, vm } = getTreeVm(
      `:props="defaultProps" :expand-on-click-node="false" default-expand-all highlight-current node-key="id" :current-node-key="currentId"`
    )

    vm.currentId = 22
    await nextTick()
    const currentNodeLabelWrapper = wrapper.find(
      '.is-current .el-tree-node__label'
    )
    expect(wrapper.find('.el-tree--highlight-current').exists()).toBe(true)
    expect(currentNodeLabelWrapper.text()).toEqual('二级 2-2')
    const _data = [...vm.data]
    await nextTick()
    vm.data = [..._data]
    await nextTick()
    const currentNodeLabelWrapper2 = wrapper.find(
      '.is-current .el-tree-node__label'
    )
    expect(currentNodeLabelWrapper2.exists()).toBe(true)
    expect(currentNodeLabelWrapper2.text()).toEqual('二级 2-2')
    expect(wrapper.find('.el-tree--highlight-current').exists()).toBe(true)
})

added

@momei-LJM
Copy link
Contributor Author

Could you add a test case?

done

@warmthsea warmthsea requested a review from btea October 22, 2024 02:19
@btea btea changed the title fix(components): [tree] keep it highlighted when the tree reset fix(components): [tree] highlight the corresponding node after data reset Oct 23, 2024
@warmthsea warmthsea merged commit dc7a7aa into element-plus:dev Oct 23, 2024
12 checks passed
@element-bot element-bot mentioned this pull request Nov 1, 2024
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component] [tree] The tree component is not properly highlighted
3 participants