fix(SelectInput): onTagChange not work when tagInputProps.tagProps.onClose (#4070)

* fix(SelectInput): `tagInputProps.tagProps` not work

* chore: stash changelog [ci skip]

* fix(Select): `props.tagInputProps?.tagProps` not work

* fix(Tag): `closeable` not work

* chore: update changelog

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: RylanBot

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,

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

packages/components/tag-input/useTagList.tsx

@@ -80,15 +80,19 @@ export default function useTagList(props: TagInputProps) {
       ? [<Fragment key="display-node">{displayNode}</Fragment>]
       : newList?.map((item, index) => {
           const tagContent = isFunction(tag) ? tag({ value: item }) : tag;
+          const handleClose = (context) => {
+            tagProps?.onClose?.(context);
+            onClose({ e: context?.e, index });
+          };
           return (
             <Tag
               key={index}
               size={size}
               disabled={disabled}
-              onClose={(context) => onClose({ e: context.e, index })}
               closable={!readOnly && !disabled}
               {...getDragProps?.(index, item)}
               {...tagProps}
+              onClose={handleClose}
             >
               {tagContent ?? item}
             </Tag>

packages/components/tag/Tag.tsx

@@ -71,7 +71,7 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     className,
   );
 
-  const TagCloseIcon = () => {
+  const tagCloseIcon = useMemo(() => {
     const iconNode = tagConfig?.closeIcon ? tagConfig.closeIcon : <CloseIcon />;
     if (React.isValidElement(iconNode)) {
       const element = iconNode as React.ReactElement<any>;
@@ -84,7 +84,8 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
         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<HTMLDivElement, TagProps> = (
         <span className={maxWidth ? `${tagClassPrefix}--text` : undefined} style={getTextStyle} {...titleAttribute}>
           {children ?? content}
         </span>
-        {closable && !disabled && <TagCloseIcon />}
+        {closable && !disabled && tagCloseIcon}
       </>
     </div>
   );

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