fix: components props transmit bugs

packages/components/cascader/cascader.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, computed } from 'vue';
-import { omit } from 'lodash-es';
 import Panel 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,
@@ -200,14 +196,7 @@ export default defineComponent({
             ),
             collapsedItems: slots.collapsedItems,
           }}
-          {...omit(props.selectInputProps as TdSelectInputProps, [
-            'onTagChange',
-            'onInputChange',
-            'onPopupVisibleChange',
-            'onBlur',
-            'onFocus',
-            'onClear',
-          ])}
+          {...selectInputEvents}
         />
       );
     };

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

packages/components/range-input/range-input.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, ref, toRefs, computed, Fragment } from 'vue';
 import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-vue-next';
 
-import Input from '../input';
+import Input, { TdInputProps } from '../input';
 import props from './props';
 import { RangeInputValue, RangeInputPosition } from './type';
 
@@ -14,6 +14,7 @@ import {
   useGlobalIcon,
   usePrefixClass,
   useCommonClassName,
+  useEventForward,
 } from '@tdesign/shared-hooks';
 
 import { isArray } from 'lodash-es';
@@ -113,6 +114,63 @@ export default defineComponent({
       const tips = renderTNodeJSX('tips');
       const separator = renderTNodeJSX('separator');
 
+      const firstInputEvents = useEventForward(inputProps.value[0] as TdInputProps, {
+        onClick: ({ e }: { e: MouseEvent }) => {
+          props.onClick?.({ e, position: 'first' });
+        },
+        onClear: () => setInnerValue([], { position: 'first', trigger: 'input' }),
+        onEnter: (val, { e }) => {
+          handleEnter([val, innerValue.value?.[1]], { e, position: 'first' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onFocus: (val, { e }) => {
+          handleFocus([val, innerValue.value?.[1]], { e, position: 'first' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onBlur: (val, { e }) => {
+          handleBlur([val, innerValue.value?.[1]], { e, position: 'first' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onChange: (val, { e }) => {
+          setInnerValue([val, innerValue.value?.[1]], { e, position: 'first', trigger: 'input' });
+        },
+      });
+      const secondInputEvents = useEventForward(inputProps.value[1] as TdInputProps, {
+        onClick: ({ e }: { e: MouseEvent }) => {
+          props.onClick?.({ e, position: 'second' });
+        },
+        onClear: () => {
+          setInnerValue([], { position: 'second', trigger: 'input' });
+        },
+        onEnter: (val, { e }) => {
+          handleEnter([innerValue.value?.[0], val], { e, position: 'second' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onFocus: (val, { e }) => {
+          handleFocus([innerValue.value?.[0], val], { e, position: 'second' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onBlur: (val, { e }) => {
+          handleBlur([innerValue.value?.[0], val], { e, position: 'second' } as {
+            e: any;
+            position: RangeInputPosition;
+          });
+        },
+        onChange: (val, { e }) => {
+          setInnerValue([innerValue.value?.[0], val], { e, position: 'second', trigger: 'input' });
+        },
+      });
+
       const RangeInputContent = (
         <div
           {...attrs}
@@ -147,30 +205,7 @@ export default defineComponent({
               readonly={isReadonly.value}
               format={format.value[0]}
               value={innerValue.value?.[0]}
-              onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'first' })}
-              onClear={() => setInnerValue([], { position: 'first', trigger: 'input' })}
-              onEnter={(val, { e }) =>
-                handleEnter([val, innerValue.value?.[1]], { e, position: 'first' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onFocus={(val, { e }) =>
-                handleFocus([val, innerValue.value?.[1]], { e, position: 'first' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onBlur={(val, { e }) =>
-                handleBlur([val, innerValue.value?.[1]], { e, position: 'first' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onChange={(val, { e }) =>
-                setInnerValue([val, innerValue.value?.[1]], { e, position: 'first', trigger: 'input' })
-              }
-              {...inputProps.value[0]}
+              {...firstInputEvents.value}
             />
 
             <div class={`${COMPONENT_NAME.value}__inner-separator`}>{separator}</div>
@@ -186,30 +221,7 @@ export default defineComponent({
               readonly={isReadonly.value}
               format={format.value[1]}
               value={innerValue.value?.[1]}
-              onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'second' })}
-              onClear={() => setInnerValue([], { position: 'second', trigger: 'input' })}
-              onEnter={(val, { e }) =>
-                handleEnter([innerValue.value?.[0], val], { e, position: 'second' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onFocus={(val, { e }) =>
-                handleFocus([innerValue.value?.[0], val], { e, position: 'second' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onBlur={(val, { e }) =>
-                handleBlur([innerValue.value?.[0], val], { e, position: 'second' } as {
-                  e: any;
-                  position: RangeInputPosition;
-                })
-              }
-              onChange={(val, { e }) =>
-                setInnerValue([innerValue.value?.[0], val], { e, position: 'second', trigger: 'input' })
-              }
-              {...inputProps.value[1]}
+              {...secondInputEvents.value}
             />
             {suffixContent ? <div class={`${COMPONENT_NAME.value}__suffix`}>{suffixContent}</div> : null}
             {(suffixIconContent || isShowClearIcon.value) && (