fix(components): [tree-select] fix bg for up/down keys, Enter bug

[SpanManX]

close #19990 fix(components): [tree-select] fix background color to up/down keys, fix Enter selection bug.

The bugs mentioned below can all be reproduced on the official website.

以下所提 BUG 都可在官网复现

https://element-plus.org/zh-CN/component/tree-select.html

Fix tree-select component bugs:

1. No background color on element when pressing "Up/Down" keys.
2. Pressing Enter key does not select the data.

This PR fixes issue #19990.

修改 tree-select 组件 BUG：

1. 键盘按“上下键” 元素没有背景色。
2. 按 Enter 键没有选中数据。

该 PR 修复了 issue #19990。

Original code test GIF images / 原始代码测试GIF图

Clicking the triangle iconto expand the tree and then pressing the "Up/Down" keys or Enter will trigger useKeydown.ts -> handleKeydown() instead of useSelect.ts -> navigateOptions().

The two different "console" logs printed in the console are to more clearly display and distinguish which function from which file was executed in the GIF.

点击三角形图标 展开树形后再按键盘“上下键或Enter键”，会执行 useKeydown.ts ->handleKeydown() ，而不是执行 useSelect.ts -> navigateOptions() 。

控制台打印的两个不同的 “console” 是为更直观的在 GIF 图上展示和区分执行了哪个文件下的函数。

The test after changing the code / 修改代码后的测试

[pull-request-triage[bot]]

👋 @SpanManX, 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 for staying tuned.

[github-actions[bot]]

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

[github-actions[bot]]

[pkg-pr-new[bot]]

Open in StackBlitz

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

commit: 7eecc9f

[SpanManX]

After modifying the code, I tested all the functionalities related to both the select and tree components, and no other functionalities were affected. If any issues are found that impact other functionalities, I can make further modifications.

代码修改完后我把跟select组件和tree组件有关联的功能都测试了一遍，没有影响其他功能。如有发现影响其他功能，我可以再次进行修改

[github-actions[bot]]

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

[SpanManX]

@yujinpan 你好，请帮忙review一下这个PR。

[SpanManX]

Thanks for your contribution.

But there are still some issues to be fixed:

• Up/Down does not work in collapsed tree nodes (may have other effects when using renderAfterExpand)
• Left/Right does not expand/collapse tree nodes

Finally we need some tests to check the code.

@yujinpan 你好，已按照要求修改了代码，请帮忙review一下 Hello, I have modified the code as requested. Please help review it.

1. Switched to using the tree component's keyboard events.
2. Used the left and right arrow keys to expand and collapse the tree.
3. Pressing Enter checks whether a value can be selected. By default, pressing Enter on a parent node expands it, considering cases where checkStrictly and lazy properties are set to true.
4. Resolved the impact of lazy loading and renderAfterExpand on the background color display order when navigating with the up and down arrow keys.

1. 改用 tree 组件的键盘事件。
2. 左右按键展开折叠 tree。
3. 回车判断是否可选中值。默认属性父级按下回车展开节点，并判断 checkStrictly 和 lazy 属性为 true 的情况。
4. 解决了 lazy 和 renderAfterExpand 加载数据对上下按键背景色显示顺序造成的影响。

[SpanManX]

@yujinpan 你好，已按照要求修改了代码，请帮忙review一下

[SpanManX]

@yujinpan 你好，是否还需要修改？

[SpanManX]

I left some comment, but over all i think it's good 👍 . As @yujinpan said, can you add a test case ?

I’ve added test cases, but the trigger firing order in the test cases is different from that in the browser. Is there a demo I can refer to?

我添加了测试用例，但是测试用例的 trigger 触发顺序跟浏览器不一样，有demo可以借鉴吗？

[Dsaquel]

I also didn't find a way to test it. Input somehow can't yield active element. I'll see tomorrow how to do it.

[Dsaquel]

With input.trigger('keydown.down') we can change active element from input to div tree but somehow .find or .querySelector can't find .hovering. Even with pr. Can't say if it's an issue or we are doing in the wrong way. For now we can use navigateOptions to mock the keydown just like in select.test.ts.

[Dsaquel]

Lgtm

[warmthsea]

There seems to be a problem 👀

1. focus select
2. down active level 1 (2 normal)
3. enter (popper close & icon error)
4. enter (data error & icon normal)

[SpanManX]

There seems to be a problem 👀

1. focus select
2. down active level 1 (2 normal)
3. enter (popper close & icon error)
4. enter (data error & icon normal)

The modification has been completed

[SpanManX]

I found another method. Wait for me to update the code

[SpanManX]

change the keyboard methods

I've already changed the keyboard methods @Dsaquel @warmthsea

[Dsaquel]

After reading the new solution i think the previous solution was a bit more reasonable, the reason of this is because you don't want to involve tree/tree-select logic in the select component to keep the code agnostic as much as possible among other reasons like preserving tree shaking.

[SpanManX]

After reading the new solution i think the previous solution was a bit more reasonable, the reason of this is because you don't want to involve tree/tree-select logic in the select component to keep the code agnostic as much as possible among other reasons like preserving tree shaking.

I've changed the code back to the previous version

[Dsaquel]

@SpanManX After looking back, the change looks quite hacky so i checked when the navigate keyboard start not working. You can see in pr https://github.com/element-plus/element-plus/pull/15768/files there are two added lines that break the navigation. With this context maybe we can find another solution :thinking: .

Thanks for your patience :heart: .

[SpanManX]

@SpanManX After looking back, the change looks quite hacky so i checked when the navigate keyboard start not working. You can see in pr https://github.com/element-plus/element-plus/pull/15768/files there are two added lines that break the navigation. With this context maybe we can find another solution 🤔 .

Thanks for your patience ❤️ .

Changed to Only when the filterable field is true can select.value?.focus() be called.

[Dsaquel]

Sorry, I just re-check #15768 is just out of context in this pr i mixed up with something else.

My only blocking thing is the changes in the select folder. I will checkout later if we can have a all changes just in tree-select folder.

[SpanManX]

tree.ts onNodeClick -> select.value?.focus() Using this method or not makes no difference

[Dsaquel]

@SpanManX I see you have got the mousedown.up working— so cool!

I will review a bit later.

[Dsaquel]

Sometimes the keydown up/down is blocked after expanding some nodes:

[SpanManX]

Sometimes the keydown up/down is blocked after expanding some nodes

I‘ve already fixed the issue, but PR #21526 needs to be awaiting review

[Dsaquel]

Yes i saw the pr, i'll review it just a bit later.

[Dsaquel]

Now we should be able to add a test as well.

[tolking]

@yujinpan cc