Reproduction link
https://stackblitz.com/edit/react-ydjxkw?file=demo.tsx
Steps to reproduce
- Type values in the select box to search
- Select a node in the tree from the search result
- Watch the tree blinks for a fraction of a second, then the nodes are collapsed and the expansion state is then lost
What is expected?
When treeDefaultExpandedKeys
is present, search and selecting a node from the tree should behave the same way as when it is not present, i.e. preserving the expansion state.
What is actually happening?
The tree expansion state is only preserved when treeDefaultExpandedKeys
is not present.
If the tree nodes are selected from expanding the nodes level by level instead of a search, the expansion state is also preserved.
| Environment | Info |
| ------------ | ------------ |
| antd | 5.6.1 |
| React | 17 ,18 |
| System | Windows |
| Browser | Chrome 113 |
8条答案
按热度按时间myzjeezk1#
@MadCcc@wctiger I would like to pick this up
ipakzgxi2#
I am unable to replicate the issue because the current behavior aligns with the overall expectations. When searching and selecting a node, the drop-down menu automatically closes. However, upon reopening the menu, the previous expansion state is retained. @MadCcc@wctiger
yh2wf1be3#
Hi @MadCcc I am not sure seeing the same behavior as you described in the sandbox link above - I agree that the dropdown closes as expected, but when I reopen it the expansion state is lost.
Here is what I am expecting:
And here is what I am currently seeing after search and selecting a node:
xmjla07d4#
You should use controlled
expandKeys
to keep state.vaj7vani5#
You should use controlled
expandKeys
to keep state.I believe you meant the props
treeExpandedKeys
? I've tried to use that props to track the expansion state myself, but I wasn't able to figure out how to get that to work with the use case showed in the sandbox.My confusion is, from reading the antd documentation I only see one event
onTreeExpand
can give expansion state but that event is only fired when clicking on the icon to expand/collapse node, it does not trigger when searching nor selecting a node. Do you mind point me to how would I get the expansion state when searching and selecting a node?kkbh8khc6#
@wctiger Thank you for clarifying and helping to reproduce the issue. I attempted to track down the component and later realized that it is built off the rc-tree-select library. I have tagged @zombieJ, who is a maintainer of
antd
andrc-tree-select
, to investigate this matter further.cwxwcias7#
I find a workaround for this issue.
Since the problem here is, when
treeDefaultExpandedKeys
is present, selecting a node via search lost the expansion state. So if I am managing the expansion state from outside when a node is selected, then it can be a valid workaround. The tricky thing is, I have to hand over the expansion state control back to the tree select when: 1 - a search is happening, 2 - user expands the tree. This is achieved by updating thetreeExpandedKeys
props:beq87vna8#
@wctiger hi could you please explain more about "the full path of the node here" means?