fix: components props transmit bugs (#6052)

* fix: props transmit bugs and test tag-input

* fix: cascader and selectInput

* fix: upload

* fix: tree-select

* fix: base-table

* fix: color-picker

* fix: date-picker

* fix: input-number

* fix: range-input

* fix: time-picker

* fix: autoComplete

* fix: select

* fix: transfer-search

* chore: hooks

* chore: stash changelog [ci skip]

* chore: remove test demo

* fix：lint

---------

Co-authored-by: wū yāng <[email protected]>
Co-authored-by: tdesign-bot <[email protected]>

Author: 3 people

packages/components/auto-complete/auto-complete.tsx

@@ -10,6 +10,7 @@ import {
   useDisabled,
   useReadonly,
   useCommonClassName,
+  useEventForward,
 } from '@tdesign/shared-hooks';
 import AutoCompleteOptionList from './components/option-list';
 
@@ -111,6 +112,16 @@ export default defineComponent({
     };
 
     return () => {
+      const inputEvents = useEventForward(innerInputProps.value, {
+        onChange: onInputChange,
+        onFocus: onInnerFocus,
+        onBlur: onInnerBlur,
+        onClear: props.onClear,
+        onCompositionend: onInnerCompositionend,
+        onCompositionstart: onInnerCompositionstart,
+        onEnter: onInnerEnter,
+      });
+
       // 触发元素
       const triggerNode = renderContent('default', 'triggerElement') || (
         <TInput
@@ -122,14 +133,7 @@ export default defineComponent({
           disabled={isDisabled.value}
           autofocus={props.autofocus}
           clearable={props.clearable}
-          onChange={onInputChange}
-          onFocus={onInnerFocus}
-          onBlur={onInnerBlur}
-          onClear={props.onClear}
-          onCompositionend={onInnerCompositionend}
-          onCompositionstart={onInnerCompositionstart}
-          onEnter={onInnerEnter}
-          {...innerInputProps.value}
+          {...inputEvents.value}
           v-slots={slots}
         />
       );
@@ -167,6 +171,9 @@ export default defineComponent({
         overlayInnerClassName: popupInnerClasses.value,
         overlayClassName: popupClasses.value,
       };
+      const popupEvents = useEventForward(popupProps, {
+        onVisibleChange: onPopupVisibleChange,
+      });
       return (
         <div class={classes.value}>
           <Popup
@@ -176,7 +183,7 @@ export default defineComponent({
             placement="bottom-left"
             hideEmptyPopup={true}
             content={panelContent ? () => panelContent : null}
-            {...popupProps}
+            {...popupEvents.value}
           >
             {triggerNode}
           </Popup>

packages/components/cascader/cascader.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, computed } from 'vue';
-import { omit } from 'lodash-es';
 import TCascaderSubPanel from './components/Panel';
 import SelectInput from '../select-input';
 import FakeArrow from '../common-components/fake-arrow';
@@ -22,6 +21,7 @@ import {
   useReadonly,
   usePrefixClass,
   useCommonClassName,
+  useEventForward,
 } from '@tdesign/shared-hooks';
 import { useCascaderContext } from './hooks';
 
@@ -104,6 +104,38 @@ export default defineComponent({
     return () => {
       const { setVisible, visible, inputVal, setInputVal } = cascaderContext.value;
 
+      const selectInputEvents = useEventForward(props.selectInputProps as TdSelectInputProps, {
+        onTagChange: (val: CascaderValue, ctx) => {
+          // 按 enter 键不处理
+          if (ctx.trigger === 'enter') return;
+          handleRemoveTagEffect(cascaderContext.value, ctx.index, props.onRemove);
+        },
+        onInputChange: (value) => {
+          if (!isFilterable.value) return;
+          setInputVal(`${value}`);
+        },
+        onPopupVisibleChange: (val: boolean, context) => {
+          if (isDisabled.value) return;
+          setVisible(val, context);
+        },
+        onBlur: (val, context) => {
+          props.onBlur?.({
+            value: cascaderContext.value.value,
+            inputValue: context.inputValue || '',
+            e: context.e as FocusEvent,
+          });
+        },
+        onFocus: (val, context) => {
+          props.onFocus?.({
+            value: cascaderContext.value.value,
+            e: context.e,
+          });
+        },
+        onClear: () => {
+          closeIconClickEffect(cascaderContext.value);
+        },
+      });
+
       return (
         <SelectInput
           class={cascaderClassNames.value}
@@ -142,42 +174,6 @@ export default defineComponent({
             ...(props.tagInputProps as TdCascaderProps['tagInputProps']),
           }}
           tagProps={{ ...(props.tagProps as TdCascaderProps['tagProps']) }}
-          onInputChange={(value, ctx) => {
-            if (!isFilterable.value) return;
-            setInputVal(`${value}`);
-            (props?.selectInputProps as TdSelectInputProps)?.onInputChange?.(value, ctx);
-          }}
-          onTagChange={(val: CascaderValue, ctx) => {
-            // 按 enter 键不处理
-            if (ctx.trigger === 'enter') return;
-            handleRemoveTagEffect(cascaderContext.value, ctx.index, props.onRemove);
-            // @ts-ignore TODO: fix bug
-            (props?.selectInputProps as TdSelectInputProps)?.onTagChange?.(val, ctx);
-          }}
-          onPopupVisibleChange={(val: boolean, context) => {
-            if (isDisabled.value) return;
-            setVisible(val, context);
-            (props?.selectInputProps as TdSelectInputProps)?.onPopupVisibleChange?.(val, context);
-          }}
-          onBlur={(val, context) => {
-            props.onBlur?.({
-              value: cascaderContext.value.value,
-              inputValue: context.inputValue || '',
-              e: context.e as FocusEvent,
-            });
-            (props?.selectInputProps as TdSelectInputProps)?.onBlur?.(val, context);
-          }}
-          onFocus={(val, context) => {
-            props.onFocus?.({
-              value: cascaderContext.value.value,
-              e: context.e,
-            });
-            (props?.selectInputProps as TdSelectInputProps)?.onFocus?.(val, context);
-          }}
-          onClear={(context: { e: MouseEvent }) => {
-            closeIconClickEffect(cascaderContext.value);
-            (props?.selectInputProps as TdSelectInputProps)?.onClear?.(context);
-          }}
           v-slots={{
             label: slots.label,
             suffix: slots.suffix,
@@ -201,14 +197,7 @@ export default defineComponent({
             ),
             collapsedItems: slots.collapsedItems,
           }}
-          {...omit(props.selectInputProps as TdSelectInputProps, [
-            'onTagChange',
-            'onInputChange',
-            'onPopupVisibleChange',
-            'onBlur',
-            'onFocus',
-            'onClear',
-          ])}
+          {...selectInputEvents.value}
         />
       );
     };

packages/components/color-picker/components/trigger/index.tsx

@@ -3,7 +3,7 @@ import TInput from '../../../input';
 import { Color, getColorObject } from '../../utils';
 import { TdColorPickerProps } from '../../type';
 import { useBaseClassName } from '../../hooks';
-import { useCommonClassName } from '@tdesign/shared-hooks';
+import { useCommonClassName, useEventForward } from '@tdesign/shared-hooks';
 
 export default defineComponent({
   name: 'DefaultTrigger',
@@ -70,6 +70,12 @@ export default defineComponent({
 
     const handleClear = (context: { e: MouseEvent }) => props.onTriggerClear?.(context);
 
+    const inputEvents = useEventForward(props.inputProps as TdColorPickerProps['inputProps'], {
+      onBlur: handleChange,
+      onChange: handleChange,
+      onClear: handleClear,
+    });
+
     return () => {
       const inputSlots = {
         label: () => {
@@ -98,10 +104,7 @@ export default defineComponent({
           v-slots={inputSlots}
           v-model={value.value}
           disabled={props.disabled}
-          onBlur={handleChange}
-          onChange={handleChange}
-          onClear={handleClear}
-          {...props.inputProps}
+          {...inputEvents.value}
         />
       );
     };

packages/components/date-picker/DatePicker.tsx

@@ -3,7 +3,15 @@ import dayjs from 'dayjs';
 import { isFunction, isDate } from 'lodash-es';
 import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-vue-next';
 
-import { useConfig, useTNodeJSX, useDisabled, useReadonly, useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks';
+import {
+  useConfig,
+  useTNodeJSX,
+  useDisabled,
+  useReadonly,
+  useGlobalIcon,
+  usePrefixClass,
+  useEventForward,
+} from '@tdesign/shared-hooks';
 
 import { useSingle } from './hooks/useSingle';
 import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '@tdesign/common-js/date-picker/format';
@@ -343,6 +351,10 @@ export default defineComponent({
       onPanelClick: () => inputRef.value?.focus?.(),
     }));
 
+    const selectInputEvents = useEventForward(props.selectInputProps as TdDatePickerProps['selectInputProps'], {
+      onClear: onTagClearClick,
+    });
+
     return () => (
       <div class={COMPONENT_NAME.value}>
         <TSelectInput
@@ -363,14 +375,13 @@ export default defineComponent({
           popupVisible={!isReadOnly.value && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           needConfirm={props.needConfirm}
-          {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}
           panel={() => <TSinglePanel {...panelProps.value} />}
           tagInputProps={{
             onRemove: onTagRemoveClick,
           }}
-          onClear={onTagClearClick}
           prefixIcon={() => renderTNodeJSX('prefixIcon')}
           suffixIcon={() => renderTNodeJSX('suffixIcon') || <CalendarIcon />}
+          {...selectInputEvents.value}
         />
       </div>
     );

packages/components/input-number/input-number.tsx

@@ -8,7 +8,7 @@ import {
 import TButton from '../button';
 import TInput from '../input';
 import props from './props';
-import { useGlobalIcon } from '@tdesign/shared-hooks';
+import { useEventForward, useGlobalIcon } from '@tdesign/shared-hooks';
 import { TdInputNumberProps } from './type';
 import useInputNumber from './hooks/useInputNumber';
 
@@ -27,6 +27,11 @@ export default defineComponent({
     const { inputRef } = p;
     context.expose({ ...p });
 
+    const inputEvents = useEventForward(props.inputProps, {
+      onChange: p.onInnerInputChange,
+      ...p.listeners,
+    });
+
     return () => {
       const reduceIcon =
         props.theme === 'column' ? <ChevronDownIcon size={props.size} /> : <RemoveIcon size={props.size} />;
@@ -58,11 +63,9 @@ export default defineComponent({
             label={props.label}
             suffix={props.suffix}
             tips={props.tips}
-            {...p.listeners}
-            {...props.inputProps}
             v-slots={context.slots}
             value={p.userInput.value}
-            onChange={p.onInnerInputChange}
+            {...inputEvents.value}
           />
           {props.theme !== 'normal' && (
             <TButton