tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

[Select] 键盘↑↓操作后选中的结果表现与鼠标点击选项选中的结果表现不一致

Open ruanlinxin opened this issue 1 year ago • 4 comments
trafficstars

tdesign-vue-next 版本

1.8.1

重现链接

No response

重现步骤

使用补充说明中的代码

  1. 开启组件过滤方法
  2. 输入任意过滤参数触发onSearch方法
  3. 通过方向键↑↓选中任意内容回车确认,最终会选中数据与实际期望的不符
  4. 通过鼠标任意点击选项,最终选中数据与期望相符

期望结果

通过方向键选择的内容应该与鼠标点击的结果是相同的

实际结果

通过搜索返回的数据在使用键盘选中时会使用偏移量从老数据里面相同位置取出数据填充,导致选中的表现不一致

框架版本

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 avatar Feb 03 '24 10:02 ruanlinxin

👋 @ruanlinxin,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Feb 03 '24 10:02 github-actions[bot]

♥️ 有劳 @xkelvinx666 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @ruanlinxin 。

github-actions[bot] avatar Feb 03 '24 10:02 github-actions[bot]

@PengYYYYY

ruanlinxin avatar Feb 18 '24 03:02 ruanlinxin

同样遇到此问题,希望解决

Select 组件展开下拉时,使用键盘通过上下键选择选项后, 按回车键触发 onEnter 事件获取的 context.value 为上一次选择的结果,应该为本次选择的结果 https://stackblitz.com/edit/od19pp?file=src%2Fdemo.vue

wilonjiang avatar Jun 03 '24 06:06 wilonjiang