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))