Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 28, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

问题描述:
当 Select 组件配置了 tagInputProps.dragSort 时,拖拽功能无法生效。

根本原因:
Select 组件总是将自定义的 renderValueDisplay 函数传递给 valueDisplay 属性,这会覆盖 TagInput 内部的标签渲染逻辑。当 TagInput 接收到自定义的 valueDisplay 时,它会直接使用该值而不是使用其内置的包含拖拽排序支持的渲染逻辑。

解决方案:
修改 select.tsx 中的 renderValueDisplay() 函数:

  1. 首先检查用户是否通过 props/slots 提供了自定义的 valueDisplay - 如果是,则使用它
  2. 然后检查 tagInputProps.dragSort 是否启用 - 如果是,返回 undefined 以让 TagInput 使用其内置的拖拽排序逻辑
  3. 否则,使用默认的标签渲染

这是一个最小化的改动,在启用拖拽排序功能的同时保持了现有行为。

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • fix(Select): 修复当 tagInputProps.dragSort 启用时拖拽功能失效的问题

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供
Original prompt

This section details on the original issue you should resolve

<issue_title>[Select] 底层 TagInput 的拖拽逻辑失效</issue_title>
<issue_description>### tdesign-vue-next 版本

1.17.2

重现链接

https://stackblitz.com/edit/kdlvdhnl?file=src%2Fdemo.vue

重现步骤

即使配置了拖拽的回调,但无法触发,也失去了 TagInput 的拖拽能力

排查代码后发现,当 TagInput 传入了 valueDisplay 后,拖拽会生效,这个设计本身合理

const displayNode = renderTNodeJSX('valueDisplay', {

label={() => renderLabel({ displayNode, label })}

但是 Select 组件在 #5424 中,使用自身实现的 Tag 渲染 作为默认覆盖传入,导致拖拽的配置无法生效

期望加入的相关适配能实现在 SelectInput / TagInput 层面,而不应完全重写 Tag 的渲染逻辑
</issue_description>

Comments on the Issue (you are @copilot in this section)

@Cat1007 临时的修正方法

通过传入 valueDisplay 强行短路掉 #5424 的修改并启用原有逻辑

<t-select
  v-model="value1"
  :options="options1"
  placeholder="请选择云解决方案"
  multiple
  filterable
  :tag-input-props="{
    valueDisplay: undefined,
    dragSort: true,
    onDragSort: dragSortHandler,
  }"
/>

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@liweijie0812
Copy link
Collaborator

@copilot 继续

Copy link
Contributor Author

Copilot AI commented Nov 28, 2025

@copilot 继续

Done! The fix has been implemented in commit ab2c585.

When tagInputProps.dragSort is enabled and no custom valueDisplay is provided, the Select component now returns undefined for valueDisplay instead of the default tag rendering. This allows TagInput's built-in drag sort logic to work properly.

Copilot AI changed the title [WIP] Fix drag logic issue in TagInput component fix(select): don't override valueDisplay when dragSort is enabled in tagInputProps Nov 28, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 28, 2025

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@6206
npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6206
npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6206

commit: ab2c585

@tdesign-bot
Copy link
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Select] 底层 TagInput 的拖拽逻辑失效

3 participants