[Bug Report] 可搜索Cascader 级联选择器使用时 多次搜索错误的内容，点击下拉无匹配数据区域 会 导致 页面卡死

[517399251]

Element UI version

2.15.8

OS/Browsers version

谷歌浏览器/103

Vue version

2.7.6

Reproduction Link

https://codepen.io/517399251/pen/bGvgvqB?editors=1100

Steps to reproduce

多次搜索不正确数据，点击显示无匹配数区域【https://element.eleme.cn/#/zh-CN/component/cascader 可搜索 可以快捷地搜索选项并选择 更容易复现】

What is Expected?

不管怎么搜索点击，都不能让页面出现卡死崩溃

What is actually happening?

可搜索Cascader 级联选择器使用时 多次搜索错误的内容，点击下拉无匹配数据区域 会 导致 页面卡死

[Zhouwanxing]

有进展没，我这边也有相同的问题

[517399251]

有进展没，我这边也有相同的问题

如果你是那种点击 select组件也会卡死的话，你可以升级一下 "element-ui": "2.15.8"，但升级后还是会出现我上面 Cascader 级联选择器 卡死的问题（不是刻意去反复点击 就没事）；

[jl1014171068]

我也出现同样的问题，仅有一条数据，刻意搜索错误或者频繁点开关闭都能看到chrome的任务管理器增加的很快。mac和window电脑都是经常复现

[luomu172]

删除.el-cascader-node节点的aria-owns属性，能解决这个问题

[newpepsi]

你们是不是改写了 filter method 方法？

[517399251]

你们是不是改写了过滤方法方法？ 没有，就正常使用

[517399251]

删除.el-cascader-node节点的aria-owns属性，能解决这个问题

请问一下，有具体的代码吗？

[54070356]

像下图这样，交替在选择框输入a，就能重现。Windows10，Chrome 104。 用的这个例子https://element.eleme.cn/#/zh-CN/component/cascader

[zszdevelop]

这么久了，还没解决吗

[517399251]

这么久了，还没解决吗 官方也不管

[517399251]

删除.el-cascader-node节点的aria-owns属性，能解决这个问题 通过dom操作删除了还是偶现卡死，特别是当通过输入框关键词删减 过滤的时候容易出现

[517399251]

这么久了，还没解决吗

你可以参考一下 @luomu172 提供的解决思路，通过操作dom方式解决的，没更改组件源码，你可以参考下： const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); Array.from($el).map(item => item.removeAttribute("aria-owns"));

[517399251]

可通过操作dom方式解决的，没更改组件源码，你可以参考下： const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); Array.from($el).map(item => item.removeAttribute("aria-owns"));

如果还有小问题，可以尝试将 属性值 debounce 调大一点，防止 下拉数据不停显示隐藏导致页面不停渲染 崩溃

[acmug]

可通过操作dom方式解决的，没更改组件源码，你可以参考下： const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); Array.from($el).map(item => item.removeAttribute("aria-owns"));

如果还有小问题，可以尝试将 属性值 debounce 调大一点，防止 下拉数据不停显示隐藏导致页面不停渲染 崩溃

我遇到的一个情况为只有个别人点击级联选择器就会导致页面崩溃，但是其他人使用起来正常，想请教下 const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); Array.from($el).map(item => item.removeAttribute("aria-owns")); 这两行代码在什么情况下运行？我不知道在什么样的情况下使用这个方法，换句话说，这个应该需要一个函数触发吧，就像@click函数这样触发，能写个demo吗

[517399251]

可以尝试将 属性值 debounce 调大一点，防止 下拉数据不停显示隐藏导致页面不停渲染 崩溃

你可以先尝试 将 属性值 debounce 调大一点，防止 下拉数据不停显示隐藏导致页面不停渲染 崩溃； 如果不行的话，在加载完 cascader 组件后进行 移除 aria-owns 属性（看具体情况）； 例如我在 mounted () { const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]'); Array.from($el).map(item => item.removeAttribute("aria-owns")); };

[ZakZheng]

我将debounce设置到2000，并在visible-change的时候清空aira-owns。这时在输入框搜索时不会卡死，但点击展开时会仍有一定概率卡死。

经查看源码，卡死前执行了 cascader.vue 的 getSuggestions 方法内的 this.suggestions = suggestions 的赋值操作。再后面就不知道内部执行了什么导致内存泄漏了。

element-plus似乎修复了该bug，但getSuggestions源码以及template代码基本相同。

[517399251]

我将debounce设置到2000，并在visible-change的时候清空aira-owns。这时在输入框搜索时不会卡死，但点击展开时会仍有一定概率卡死。

经查看源码，卡死前执行了 cascader.vue 的 getSuggestions 方法内的 this.suggestions = suggestions 的赋值操作。再后面就不知道内部执行了什么导致内存泄漏了。

element-plus似乎修复了该bug，但getSuggestions源码以及template代码基本相同。

element-plus确实没有这个问题，我现在都不去解决了，实在不行就单独使用 ant-design-vue 的 cascader 组件