fix(tag-input): fix tag-input

src/input/input.tsx

@@ -1,6 +1,6 @@
-import 'tdesign-icons-web-components/esm/components/close-circle-filled';
 import 'tdesign-icons-web-components/esm/components/browse';
 import 'tdesign-icons-web-components/esm/components/browse-off';
+import 'tdesign-icons-web-components/esm/components/close-circle-filled';
 
 import { cloneElement, Component, createRef, OmiProps, tag, VNode } from 'omi';
 
@@ -146,6 +146,8 @@ export default class Input extends Component<InputProps> {
       onValidateChange();
       onChange?.(newStr);
     }
+
+    this.update();
   };
 
   private handleFocus = (e: FocusEvent) => {
@@ -229,6 +231,19 @@ export default class Input extends Component<InputProps> {
     onCompositionend?.(currentTarget.value, { e });
   };
 
+  private updateInputWidth() {
+    if (!this.props.autoWidth || !this.inputRef.current) {
+      return;
+    }
+    const { offsetWidth } = this.inputPreRef.current;
+    const { width } = this.inputPreRef.current.getBoundingClientRect();
+    // 异步渲染场景下 getBoundingClientRect 宽度为 0，需要使用 offsetWidth
+    const calcWidth = width < offsetWidth ? offsetWidth + 1 : width;
+    this.inputRef.current.style.width = `${calcWidth}px`;
+  }
+
+  private resizeObserver: ResizeObserver | null = null;
+
   install() {
     this.value = this.props.defaultValue || this.props.value;
     this.status = this.props.status;
@@ -237,23 +252,21 @@ export default class Input extends Component<InputProps> {
   installed() {
     this.renderType = this.props.type;
     const inputNode = this.inputRef.current;
-    const updateInputWidth = () => {
-      if (!this.props.autoWidth || !this.inputRef.current) return;
-      const { offsetWidth } = this.inputPreRef.current;
-      const { width } = this.inputPreRef.current.getBoundingClientRect();
-      // 异步渲染场景下 getBoundingClientRect 宽度为 0，需要使用 offsetWidth
-      const calcWidth = width < offsetWidth ? offsetWidth + 1 : width;
-      this.inputRef.current.style.width = `${calcWidth}px`;
-    };
 
     if (this.props.autoWidth) {
       requestAnimationFrame(() => {
-        updateInputWidth();
+        this.updateInputWidth();
       });
     }
 
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateInputWidth();
+    });
+
     inputNode.addEventListener('input', (e) => {
       if (this.composingRef.current) {
+        this.composingValue = (e.currentTarget as HTMLInputElement)?.value || '';
+        this.update();
         return;
       }
       const target = e.currentTarget as any;
@@ -273,11 +286,6 @@ export default class Input extends Component<InputProps> {
       if (!this.props.allowInputOverMax) {
         this.update();
       }
-      if (this.props.autoWidth) {
-        requestAnimationFrame(() => {
-          updateInputWidth();
-        });
-      }
       onValidateChange();
     });
   }
@@ -339,6 +347,7 @@ export default class Input extends Component<InputProps> {
     if (isShowClearIcon) {
       suffixIconNew = (
         <t-icon-close-circle-filled
+          onMouseDown={(e) => e.preventDefault()}
           name={'close-circle-filled'}
           className={classname(
             `${classPrefix}-input__suffix-clear`,
@@ -354,6 +363,7 @@ export default class Input extends Component<InputProps> {
       if (this.renderType === 'password') {
         suffixIconNew = (
           <t-icon-browse-off
+            onMouseDown={(e) => e.preventDefault()}
             onClick={this.handlePasswordVisible}
             className={classname(
               `${classPrefix}-input__suffix-clear`,
@@ -366,6 +376,7 @@ export default class Input extends Component<InputProps> {
       } else if (this.renderType === 'text') {
         suffixIconNew = (
           <t-icon-browse
+            onMouseDown={(e) => e.preventDefault()}
             onClick={this.handlePasswordVisible}
             className={classname(
               `${classPrefix}-input__suffix-clear`,
@@ -466,6 +477,10 @@ export default class Input extends Component<InputProps> {
         )}
         ref={this.wrapperRef}
         part="wrap"
+        onClick={(e) => {
+          this.inputRef.current?.focus();
+          restProps.onClick?.(e);
+        }}
         {...restProps}
       >
         {renderInputNode}
@@ -475,4 +490,11 @@ export default class Input extends Component<InputProps> {
       </div>
     );
   }
+
+  rendered() {
+    this.resizeObserver?.disconnect();
+    if (this.inputPreRef.current) {
+      this.resizeObserver?.observe(this.inputPreRef.current);
+    }
+  }
 }

src/tag-input/tag-input.tsx

@@ -507,11 +507,13 @@ export default class TagInput extends Component<TagInputProps> {
 
     const suffixIconNode = showClearIcon ? (
       <t-icon-close-circle-filled
+        style={{ display: 'flex' }}
         class={classNames([
           `${classPrefix}-icon`,
           `${classPrefix}-icon-close-circle-filled `,
           TagInputClassNamePrefix(`__suffix-clear`),
         ])}
+        onMouseDown={(e) => e.preventDefault()}
         onClick={this.onClearClick}
       />
     ) : (

src/tag/tag.tsx

@@ -61,6 +61,7 @@ export default class Tag extends Component<TagProps> {
 
   deleteIcon = (
     <t-icon-close
+      onMouseDown={(e) => e.preventDefault()}
       onClick={(e) => {
         if (this.props.disabled) return;
         e.stopImmediatePropagation();