fix: components props transmit bugs #6052

Wesley-0808 · 2025-10-09T12:25:52Z

🤔 这个 PR 的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

修复部分组件的方法透传问题
根据在 #4802 得出的结论，问题的原因：

部分组件有这种处理方法：

虽然这样的解决方案不会将两个方法合并成数组
但后者会覆盖前者，即组件内部的回调方法就失效了，只会调用用户传入的方法。

🙋🌰 举个例子

selectInput 基于 Input，如果 selectInput 的 onChange 是非常必要的，但是又透传了 inputProps ，那么用户定义的 onChange 就会覆盖掉 selectInput 必要的 onChange ，可能会导致 selectInput 出现异常问题

一个解决方案：

因为不止一个组件有这类问题，所以新建了一个hooks useEventForward，用于处理这种特殊的情况。
useEventForward会处理每一个event，并合并同名的方法，按照先调用组件的回调再调用用户传入的回调的顺序调用

一种情况

selectInput 在透传 tagInputProps 的同时，提供了 onTagChange API，就是 tagInput 的 onChange。这种情况下，onTagChange 会比透传的(tagInputProps的onChange)先调用，更多层组件套用也是同理：用户通过透传props传入的事件会被最后调用，因为useEventForward的调用顺序是先调用组件的回调再调用用户传入的回调

📝 更新日志

本条 PR 不需要纳入 Changelog

tdesign-vue-next

fix(TagInput): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(Cascader): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(SelectInput): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(Upload): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(TreeSelect): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(Table): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(ColorPicker): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(DatePicker): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(InputNumber): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(RangeInput): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(TimePicker): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(Select): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(AutoComplete): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题
fix(Transfer): 优化透传组件 props 事件的处理方式，修复透传的回调函数无法触发的问题

@tdesign-vue-next/chat

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

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

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

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

tdesign-bot · 2025-10-09T12:28:45Z

TDesign Component Site Preview Open

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

pkg-pr-new · 2025-10-09T23:33:25Z

tdesign-vue-next-demo

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

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6052

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6052

commit: cf93a09

Copilot

Pull Request Overview

This PR fixes a critical bug in props transmission across multiple TDesign Vue components where component event handlers were being overridden by user-provided event handlers instead of being properly merged.

Introduces a new useEventForward hook to handle merging of component and user event handlers
Fixes props transmission issues in 11 components (TagInput, Cascader, SelectInput, Upload, TreeSelect, Table, ColorPicker, DatePicker, InputNumber, RangeInput, TimePicker)
Ensures component internal handlers execute first, followed by user-provided handlers, preventing component functionality from being broken

Reviewed Changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/shared/hooks/useEventForward/index.ts	New hook implementation for merging event handlers with error handling
packages/shared/hooks/useEventForward/index.md	Documentation placeholder for the new hook
packages/shared/hooks/index.ts	Export the new useEventForward hook
packages/components/upload/components/multiple-flow-list.tsx	Apply useEventForward to upload/cancel button props
packages/components/tree-select/tree-select.tsx	Fix event forwarding for tree and selectInput props
packages/components/time-picker/time-range-picker.tsx	Apply useEventForward to rangeInput and popup props
packages/components/time-picker/time-picker.tsx	Fix selectInput props event forwarding
packages/components/tag-input/tag-input.tsx	Apply useEventForward to input props
packages/components/tag-input/hooks/useTagList.tsx	Fix tag props event forwarding
packages/components/table/base-table.tsx	Apply useEventForward to affix props
packages/components/select-input/hooks/useSingle.tsx	Fix input props event forwarding
packages/components/select-input/hooks/useMultiple.tsx	Apply useEventForward to tagInput props
packages/components/range-input/range-input.tsx	Fix event forwarding for both input instances
packages/components/input-number/input-number.tsx	Apply useEventForward to input props
packages/components/date-picker/DatePicker.tsx	Fix selectInput props event forwarding
packages/components/color-picker/components/trigger/index.tsx	Apply useEventForward to input props
packages/components/cascader/cascader.tsx	Fix selectInput props event forwarding and remove omit usage
packages/components/upload/_example/test.vue	Test example for upload component
packages/components/tag-input/_example/testinput.vue	Test example for tag-input component
packages/components/select-input/_example/testinput.vue	Test example for select-input component

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/shared/hooks/useEventForward/index.ts

packages/components/cascader/cascader.tsx

uyarn · 2025-10-13T15:03:30Z

这样确实解决了问题，但是又增加了贡献的心智负担，写事件的时候要记得用这个hooks了

Wesley-0808 · 2025-10-13T16:31:25Z

这样确实解决了问题，但是又增加了贡献的心智负担，写事件的时候要记得用这个hooks了

是的，不过这个问题大多数出现在输入类的组件🫠

Copilot

Pull Request Overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

packages/shared/hooks/useEventForward/index.ts:1

[nitpick] Consider using a more structured logging approach or making the error handling configurable. Direct console.warn calls may not be appropriate for all environments (production, testing, etc.).

import { computed, ComputedRef } from 'vue';

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/shared/hooks/useEventForward/index.ts

packages/components/upload/components/multiple-flow-list.tsx

packages/components/upload/_example/test.vue

packages/components/cascader/cascader.tsx

uyarn · 2025-10-23T16:10:30Z

带在 1.18.0 的版本

fix: props transmit bugs and test tag-input

c5e0826

Wesley-0808 requested review from Cat1007, PengYYYYY, chaishi, liweijie0812, uyarn, zhangpaopao0609 and zydemail as code owners October 9, 2025 12:25

Wesley-0808 added the WIP label Oct 9, 2025

Wesley-0808 requested a review from RSS1102 October 9, 2025 15:40

fix: cascader and selectInput

fa595c7

Wesley-0808 force-pushed the wesley/fix/props-transmit branch from 629d911 to 0ff87ad Compare October 10, 2025 11:10

fix: upload

89474fb

Wesley-0808 force-pushed the wesley/fix/props-transmit branch from 0ff87ad to 89474fb Compare October 10, 2025 11:21

Wesley-0808 added 5 commits October 10, 2025 20:20

fix: tree-select

812640c

fix: base-table

e42ee15

fix: color-picker

e1b5c81

fix: date-picker

26ef706

fix: input-number

4e435cd

Wesley-0808 force-pushed the wesley/fix/props-transmit branch from 91c7f72 to 4e435cd Compare October 10, 2025 12:52

Wesley-0808 added 2 commits October 10, 2025 21:24

fix: range-input

2a1861c

fix: time-picker

b718995

Wesley-0808 removed the WIP label Oct 10, 2025

liweijie0812 requested a review from Copilot October 13, 2025 01:33

Copilot AI reviewed Oct 13, 2025

View reviewed changes

packages/shared/hooks/useEventForward/index.ts Outdated Show resolved Hide resolved

packages/components/cascader/cascader.tsx Outdated Show resolved Hide resolved

Wesley-0808 added 3 commits October 13, 2025 13:04

fix: autoComplete

ca129e0

fix: select

71179cd

fix: transfer-search

a77bd5e

chore: hooks

2eb383b

Wesley-0808 requested a review from Copilot October 14, 2025 06:27

Copilot AI reviewed Oct 14, 2025

View reviewed changes

Merge branch 'develop' into wesley/fix/props-transmit

cf93a09

uyarn approved these changes Oct 23, 2025

View reviewed changes

chore: stash changelog [ci skip]

fef9802

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: components props transmit bugs #6052

fix: components props transmit bugs #6052

Uh oh!

Wesley-0808 commented Oct 9, 2025 •

edited by uyarn

Loading

Uh oh!

tdesign-bot commented Oct 9, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 9, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

uyarn commented Oct 13, 2025

Uh oh!

Wesley-0808 commented Oct 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

uyarn commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: components props transmit bugs #6052

Are you sure you want to change the base?

fix: components props transmit bugs #6052

Uh oh!

Conversation

Wesley-0808 commented Oct 9, 2025 • edited by uyarn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 这个 PR 的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

🙋🌰 举个例子

一个解决方案：

一种情况

📝 更新日志

tdesign-vue-next

@tdesign-vue-next/chat

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

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

Uh oh!

tdesign-bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TDesign Component Site Preview Open

Uh oh!

pkg-pr-new bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

uyarn commented Oct 13, 2025

Uh oh!

Wesley-0808 commented Oct 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

uyarn commented Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Wesley-0808 commented Oct 9, 2025 •

edited by uyarn

Loading

tdesign-bot commented Oct 9, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 9, 2025 •

edited

Loading