tdesign-vue-next
tdesign-vue-next copied to clipboard
[Select] 键盘↑↓操作后选中的结果表现与鼠标点击选项选中的结果表现不一致
trafficstars
tdesign-vue-next 版本
1.8.1
重现链接
No response
重现步骤
使用补充说明中的代码
- 开启组件过滤方法
- 输入任意过滤参数触发onSearch方法
- 通过方向键↑↓选中任意内容回车确认,最终会选中数据与实际期望的不符
- 通过鼠标任意点击选项,最终选中数据与期望相符
期望结果
通过方向键选择的内容应该与鼠标点击的结果是相同的
实际结果
通过搜索返回的数据在使用键盘选中时会使用偏移量从老数据里面相同位置取出数据填充,导致选中的表现不一致
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
以下是复现代码
<template>
<t-select v-bind="selectProps" :options="view.option"></t-select>
</template>
<script setup lang="ts">
import { TdSelectProps } from 'tdesign-vue-next';
const Option = (v) => ({ value: v, label: v });
const baseOptions = (n, offset) => new Array(n).fill(null).map((a, i) => Option(i + offset));
const view = reactive({
option1: baseOptions(20, 0),
option2: baseOptions(20, 5),
option: [],
});
const selectProps: TdSelectProps = {
filter: () => true,
onFocus() {
view.option = [...view.option1];
},
onSearch() {
view.option = [...view.option2];
},
};
</script>
👋 @ruanlinxin,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
♥️ 有劳 @xkelvinx666 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @ruanlinxin 。
@PengYYYYY
同样遇到此问题,希望解决
Select 组件展开下拉时,使用键盘通过上下键选择选项后, 按回车键触发 onEnter 事件获取的 context.value 为上一次选择的结果,应该为本次选择的结果 https://stackblitz.com/edit/od19pp?file=src%2Fdemo.vue