[Component] [cascader] Selected tags disappear after blur when persistent is false
Bug Type: Component
Environment
- Vue Version:
3.5.42 - Element Plus Version:
2.14.5 - Browser / OS:
Chrome 151.0.7922.169/win 10 - Build Tool:
Vite
Reproduction
Related Component
el-cascader
Reproduction Link
Steps to reproduce
- Render an el-cascader with multiple selection enabled and persistent set to false.
- Open the cascader dropdown.
- Select one or more options.
- Click outside the cascader to close the dropdown and make the component lose focus.
- Observe the selected tags displayed in the cascader input.
What is Expected?
The dropdown content should be destroyed after it becomes inactive because persistent is false.
However, the selected labels/tags should remain visible in the cascader input. The persistent property should only control the lifecycle of the dropdown DOM and should not affect the display of the current model value.
What is actually happening?
After the cascader loses focus and the dropdown is destroyed, the selected labels/tags disappear from the input.
The v-model value is still present and has not been cleared. Setting persistent to true prevents the selected labels/tags from disappearing.
Additional comments
The displayed labels appear to depend on checkedNodes from cascaderPanelRef. When persistent is false, closing the dropdown destroys the cascader panel, causing cascaderPanelRef to become undefined and checkedNodes to fall back to an empty array.
Related implementation:
const checkedNodes = computed( () => cascaderPanelRef.value?.checkedNodes || [] )
Source: element-plus/element-plus