diff --git a/packages/components/select-input/useMultiple.tsx b/packages/components/select-input/useMultiple.tsx
index 66dcf839a6..088a462038 100644
--- a/packages/components/select-input/useMultiple.tsx
+++ b/packages/components/select-input/useMultiple.tsx
@@ -110,12 +110,12 @@ export default function useMultiple(props: SelectInputProps) {
if (context?.trigger === 'enter' || context?.trigger === 'blur') return;
setTInputValue(val, { trigger: context.trigger, e: context.e });
}}
- tagProps={props.tagProps}
onClear={p.onInnerClear}
// [Important Info]: SelectInput.blur is not equal to TagInput, example: click popup panel
onFocus={handleFocus}
onBlur={handleBlur}
{...props.tagInputProps}
+ tagProps={{ ...props.tagProps, ...props.tagInputProps?.tagProps }}
inputProps={{
...props.inputProps,
readOnly: !props.allowInput || readOnly,
diff --git a/packages/components/select/base/Select.tsx b/packages/components/select/base/Select.tsx
index efcdd9191a..8d7e702d9e 100644
--- a/packages/components/select/base/Select.tsx
+++ b/packages/components/select/base/Select.tsx
@@ -87,7 +87,6 @@ const Select = forwardRefWithStatics(
panelTopContent,
selectInputProps,
tagInputProps,
- tagProps,
scroll,
suffixIcon,
label,
@@ -102,6 +101,7 @@ const Select = forwardRefWithStatics(
onPopupVisibleChange,
} = props;
const readOnly = props.readOnly || props.readonly;
+ const tagProps = { ...props.tagProps, ...props.tagInputProps?.tagProps };
const [value, onChange] = useControlled(props, 'value', props.onChange);
diff --git a/packages/components/tag-input/useTagList.tsx b/packages/components/tag-input/useTagList.tsx
index 22c9ec9f9f..8c00fd1d2d 100644
--- a/packages/components/tag-input/useTagList.tsx
+++ b/packages/components/tag-input/useTagList.tsx
@@ -80,15 +80,19 @@ export default function useTagList(props: TagInputProps) {
? [{displayNode}]
: newList?.map((item, index) => {
const tagContent = isFunction(tag) ? tag({ value: item }) : tag;
+ const handleClose = (context) => {
+ tagProps?.onClose?.(context);
+ onClose({ e: context?.e, index });
+ };
return (
onClose({ e: context.e, index })}
closable={!readOnly && !disabled}
{...getDragProps?.(index, item)}
{...tagProps}
+ onClose={handleClose}
>
{tagContent ?? item}
diff --git a/packages/components/tag/Tag.tsx b/packages/components/tag/Tag.tsx
index 6ce507dd4c..5fccc7f905 100644
--- a/packages/components/tag/Tag.tsx
+++ b/packages/components/tag/Tag.tsx
@@ -71,7 +71,7 @@ export const TagFunction: ForwardRefRenderFunction = (
className,
);
- const TagCloseIcon = () => {
+ const tagCloseIcon = useMemo(() => {
const iconNode = tagConfig?.closeIcon ? tagConfig.closeIcon : ;
if (React.isValidElement(iconNode)) {
const element = iconNode as React.ReactElement;
@@ -84,7 +84,8 @@ export const TagFunction: ForwardRefRenderFunction = (
className: classNames(element.props?.className, `${tagClassPrefix}__icon-close`),
});
}
- };
+ return null;
+ }, [CloseIcon, disabled, tagClassPrefix, tagConfig.closeIcon, onClose]);
const title = useMemo(() => {
if (Reflect.has(props, 'title')) return titleAttr;
@@ -143,7 +144,7 @@ export const TagFunction: ForwardRefRenderFunction = (
{children ?? content}
- {closable && !disabled && }
+ {closable && !disabled && tagCloseIcon}
>
);
diff --git a/packages/tdesign-react/.changelog/pr-4070.md b/packages/tdesign-react/.changelog/pr-4070.md
new file mode 100644
index 0000000000..70a36d84d4
--- /dev/null
+++ b/packages/tdesign-react/.changelog/pr-4070.md
@@ -0,0 +1,8 @@
+---
+pr_number: 4070
+contributor: RylanBot
+---
+
+- fix(SelectInput): 修复 `1.16.0` 版本的修复导致点击 `closable` 图标时无法清除选项的问题 @RylanBot ([#4070](https://github.com/Tencent/tdesign-react/pull/4070))
+- fix(SelectInput): 修复传入 `tagInputProps.tagProps.onClose` 时,`onTagChange` 不生效的问题 @RylanBot ([#4070](https://github.com/Tencent/tdesign-react/pull/4070))
+- fix(Select): 修复 `tagInputProps.tagProps` 不生效的问题 @RylanBot ([#4070](https://github.com/Tencent/tdesign-react/pull/4070))