@hsu-react/ui 2.5.2 → 2.5.4

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -7,6 +7,7 @@ import { ChartCommonProps, ChartOptionType, ChartsOption } from "../..";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
+import { useLatestRef } from "../../../../hooks/useLatestRef";
 
 export interface Pie3DDataItem {
   name: string;
@@ -170,6 +171,10 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     { minHeight, maxHeight, yOffset, autoRotate }
   );
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
 
@@ -177,7 +182,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     chart.setOption(chartOption as ChartOptionType, true);
@@ -211,7 +216,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleResize,
     handleMouseOver,
     handleGlobalOut,
-    onChart,
+    onChartRef,
     onClick,
     containerReady,
   ]);

package/src/components/Chart/Pie/index.tsx

@@ -13,6 +13,7 @@ import { autoScrollLegend } from "../chartUtils";
 
 import styles from "../index.module.scss";
 import ChartPie3D, { ChartPie3DProps } from "./Pie3D";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface ChartPieProps extends ChartCommonProps {
   chartTitle?: string;
@@ -252,6 +253,10 @@ const ChartPie: ChartPieFC = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -262,7 +267,7 @@ const ChartPie: ChartPieFC = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -315,7 +320,7 @@ const ChartPie: ChartPieFC = (props) => {
   }, [
     chartOption,
     handleResize,
-    onChart,
+    onChartRef,
     onClick,
     enableLegendAutoScroll,
     seriesData,

package/src/components/Chat/ChatInput/index.tsx

@@ -14,6 +14,7 @@ import {
 } from "./_components";
 import classNames from "classnames";
 import Button, { ButtonProps } from "../../Button";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 export type { AgentToggleConfig } from "./_components";
 
 export interface AgentConfig {
@@ -127,6 +128,10 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Use external state or internal state
   const agentsState = isControlled ? externalAgentsState : internalAgentsState;
 
+  const onAgentsChangeRef = useLatestRef(onAgentsChange);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // When the model switches, sync the agents state (only in uncontrolled mode)
   useEffect(() => {
     if (isControlled) return; // In controlled mode, state is managed externally
@@ -136,12 +141,12 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     );
     if (currentModel?.agents && currentModel.agents.length > 0) {
       setInternalAgentsState(currentModel.agents);
-      onAgentsChange?.(currentModel.agents);
+      onAgentsChangeRef.current?.(currentModel.agents);
     }
   }, [
     modelConfig?.modelType,
     modelConfig?.modelList,
-    onAgentsChange,
+    onAgentsChangeRef,
     isControlled,
   ]);
 

package/src/components/Icon/index.tsx

@@ -8,6 +8,7 @@ import * as AntdIcons from "@ant-design/icons";
 import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../hooks/useLatestRef";
 
 type AntdNamedIconComponent = React.ForwardRefExoticComponent<
   {
@@ -73,9 +74,13 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, forwardedRef)
     [forwardedRef]
   );
 
+  const onRefRef = useLatestRef(onRef);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
-    onRef?.(ref);
-  }, [onRef, ref]);
+    onRefRef.current?.(ref);
+  }, [onRefRef, ref]);
 
   const mergedStyle: React.CSSProperties = {
     color,

package/src/components/Input/Number/index.tsx

@@ -8,8 +8,8 @@ import { CloseCircleFilled } from "@ant-design/icons";
 
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import { useDebounceEffect } from "ahooks";
 import type { InputNumberRef } from "../../../types/antd";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface InputNumberProps extends Omit<
   AntdInputNumberProps,
@@ -44,6 +44,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   const ref = useRef<InputNumberRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const getRefRef = useLatestRef(getRef);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -58,22 +59,21 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的文本，代替原来那个用 state 记账的写法
+  const notifiedRef = useRef<string>(initialValue);
 
-  useDebounceEffect(
-    () => {
-      if (_value !== lastValue) {
-        setLastValue(_value);
-
-        onChange?.(_value);
-      }
-    },
-    [_value, lastValue, onChange],
-    {
-      wait: 10,
-    },
-  );
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
@@ -96,17 +96,18 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         Number(value) === Number(_value);
 
       if (sameNumber) {
-        // 只同步「已提交值」，不动正在编辑的文本
-        setLastValue(_value);
+        // 只同步「已通知过的值」，不动正在编辑的文本
+        notifiedRef.current = _value;
       } else if (value !== undefined && value !== null) {
         const newValue =
           typeof value === "number" ? `${value}` : value?.toString();
+        // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+        notifiedRef.current = newValue;
         setValue(newValue);
-        setLastValue(newValue);
       } else {
         // Clear only on initialization or when explicitly set to undefined/null externally
+        notifiedRef.current = "";
         setValue("");
-        setLastValue("");
       }
     }
     // `_value` 是刻意不进依赖的：这个 effect 只该在**外部** value 变化时跑，
@@ -114,15 +115,15 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   const handleClear = (e: React.MouseEvent) => {
     e.stopPropagation();
     setValue("");
-    setLastValue("");
-    onChange?.("");
+    notify("");
   };
 
   const showClear =
@@ -138,6 +139,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
             ? ""
             : (typeof e === "number" ? e : e || "").toString();
         setValue(newValue);
+        notify(newValue);
       }}
       className={classNames(styles.antdInput, className)}
       controls={false}

package/src/components/Input/Password/index.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { InputRef } from "antd/es/input";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface PasswordProps
   extends Omit<
@@ -19,8 +20,11 @@ export interface PasswordProps
 const Password: React.FC<PasswordProps> = (props) => {
   const { onChange, getRef, value, defaultValue, className, ...inputConfig } =
     props;
-  const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
+  const getRefRef = useLatestRef(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = useRef(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -31,51 +35,58 @@ const Password: React.FC<PasswordProps> = (props) => {
       : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = useRef<string>(initialValue);
 
-  useEffect(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? (value?.toString() ?? "") : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   return (
     <AntdPassword
       className={classNames(styles.antdInput, className)}
       ref={ref}
-      onCompositionStart={() => setComposing(true)}
-      onCompositionEnd={() => {
-        setTimeout(() => {
-          setComposing(false);
-        }, 1);
+      onCompositionStart={() => {
+        composingRef.current = true;
+      }}
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+        // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+        notify(e.currentTarget.value);
       }}
       value={_value}
       onChange={(e) => {
-        setValue(e.target.value);
+        const next = e.target.value;
+        setValue(next);
+        if (!composingRef.current) notify(next);
       }}
       {...inputConfig}
     />

package/src/components/Input/Search/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import AntdSearch from "antd/es/input/Search";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface SearchProps
   extends Omit<
@@ -17,8 +18,11 @@ export interface SearchProps
 const Search: React.FC<SearchProps> = (props) => {
   const { onChange, getRef, value, defaultValue, className, ...inputConfig } =
     props;
-  const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
+  const getRefRef = useLatestRef(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = useRef(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -29,50 +33,59 @@ const Search: React.FC<SearchProps> = (props) => {
       : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = useRef<string>(initialValue);
 
-  useEffect(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? (value?.toString() ?? "") : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   return (
     <AntdSearch
       ref={ref}
       className={classNames(styles.antdInput, className)}
-      onCompositionStart={() => setComposing(true)}
-      onCompositionEnd={() => {
-        setTimeout(() => {
-          setComposing(false);
-        }, 1);
+      onCompositionStart={() => {
+        composingRef.current = true;
+      }}
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+        // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+        notify(e.currentTarget.value);
       }}
       value={_value}
-      onChange={(e) => setValue(e.target.value)}
+      onChange={(e) => {
+        const next = e.target.value;
+        setValue(next);
+        if (!composingRef.current) notify(next);
+      }}
       {...inputConfig}
     />
   );

package/src/components/Input/TextArea/index.test.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import { makeAutoObservable } from "mobx";
+import { observer } from "mobx-react-lite";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import TextArea from ".";
+
+/** 受控消费方：`value` 从自己的 state 来，`onChange` 写回同一份 state */
+function Controlled({
+  onChange,
+  initial = "",
+  ...rest
+}: {
+  onChange: (v: string) => void;
+  initial?: string;
+} & Record<string, unknown>) {
+  const [v, setV] = useState(initial);
+
+  return (
+    <TextArea
+      value={v}
+      // 内联箭头：每次渲染都是新引用。消费方最常见的写法，组件必须扛得住
+      onChange={(next) => {
+        setV(next);
+        onChange(next);
+      }}
+      {...rest}
+    />
+  );
+}
+
+const type = (el: HTMLElement, value: string) =>
+  fireEvent.change(el, { target: { value } });
+
+describe("TextArea", () => {
+  it("消费方传内联箭头 onChange 时不进入无限循环", async () => {
+    const spy = vi.fn();
+    render(<Controlled onChange={spy} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    type(ta, "a");
+
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("a"));
+    // 敲一个字只该回调一次；进了循环这里会是几十上百次
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+    expect(ta.value).toBe("a");
+
+    spy.mockClear();
+    type(ta, "ab");
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("ab"));
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+    expect(ta.value).toBe("ab");
+  });
+
+  it("全是空白的输入回调成空串，且不反复回调", async () => {
+    const spy = vi.fn();
+    render(<Controlled onChange={spy} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    type(ta, "   ");
+
+    await waitFor(() => expect(spy).toHaveBeenCalledWith(""));
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+  });
+
+  it("非受控：不传 value 时内部自己维护，onChange 照常只回调一次", async () => {
+    const spy = vi.fn();
+    render(<TextArea defaultValue="x" onChange={spy} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(ta.value).toBe("x");
+
+    type(ta, "xy");
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("xy"));
+    expect(spy.mock.calls.length).toBe(1);
+    expect(ta.value).toBe("xy");
+  });
+
+  it("外部改 value 会同步进输入框，且不额外触发 onChange", async () => {
+    const spy = vi.fn();
+    const { rerender } = render(<TextArea value="a" onChange={spy} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(ta.value).toBe("a");
+
+    rerender(<TextArea value="b" onChange={spy} />);
+    await waitFor(() => expect(ta.value).toBe("b"));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it("maxLength 生效，en 时不截断", () => {
+    const { unmount } = render(<TextArea maxLength={3} />);
+    expect(
+      (screen.getByRole("textbox") as HTMLTextAreaElement).maxLength,
+    ).toBe(3);
+    unmount();
+
+    render(<TextArea maxLength={3} en />);
+    expect(
+      (screen.getByRole("textbox") as HTMLTextAreaElement).maxLength,
+    ).toBe(-1);
+  });
+
+  it("disabled 透传", () => {
+    render(<TextArea disabled />);
+    expect((screen.getByRole("textbox") as HTMLTextAreaElement).disabled).toBe(
+      true,
+    );
+  });
+
+  it("中文输入法组字期间不回调，组完才回调一次", async () => {
+    const spy = vi.fn();
+    render(<Controlled onChange={spy} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+    fireEvent.compositionStart(ta);
+    type(ta, "n");
+    type(ta, "ni");
+    await new Promise((r) => setTimeout(r, 20));
+    expect(spy).not.toHaveBeenCalled();
+
+    fireEvent.compositionEnd(ta);
+    type(ta, "你");
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("你"));
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+  });
+  /**
+   * 这一条是真正的回归用例：父级用 MobX（`useSyncExternalStore`）回写 value，
+   * React 会以同步优先级重渲，组件内排在 effect 里的 state 更新会被那一趟跳过。
+   * 旧实现用 state 记「通知过没有」，读到过期记账就会再发一次通知 → 死循环。
+   */
+  it("父级是 MobX observer、又传内联箭头时也不循环", async () => {
+    class Store {
+      private _draft: { body: string } | undefined = { body: "hello" };
+      constructor() {
+        makeAutoObservable(this);
+      }
+      get draft() {
+        return this._draft;
+      }
+      setBody = (body: string) => {
+        if (this._draft) this._draft = { ...this._draft, body };
+      };
+    }
+
+    const store = new Store();
+    const spy = vi.fn();
+    const Cmp = observer(() => {
+      const { draft, setBody } = store;
+      if (!draft) return null;
+
+      return (
+        <TextArea
+          value={draft.body}
+          onChange={(v) => {
+            spy(v);
+            setBody(v);
+          }}
+        />
+      );
+    });
+
+    render(<Cmp />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+    type(ta, "helloX");
+
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("helloX"));
+    await new Promise((r) => setTimeout(r, 100));
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+    expect(store.draft?.body).toBe("helloX");
+  });
+
+  it("内联 getRef 也不会把消费方转崩", async () => {
+    const seen: unknown[] = [];
+    const Cmp = () => {
+      const [, setTick] = useState(0);
+
+      return (
+        <TextArea
+          getRef={(r) => {
+            seen.push(r);
+            setTick((n) => n + 1);
+          }}
+        />
+      );
+    };
+
+    render(<Cmp />);
+    await new Promise((r) => setTimeout(r, 100));
+    // 只在挂载时交一次 ref；旧写法会跟着每次渲染重跑，这里会是几十上百次
+    expect(seen.length).toBe(1);
+    expect(seen[0]).not.toBeNull();
+  });
+
+  it("外部把 value 置为 undefined 会清空", async () => {
+    const { rerender } = render(<TextArea value="a" />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(ta.value).toBe("a");
+
+    rerender(<TextArea value={undefined} />);
+    await waitFor(() => expect(ta.value).toBe(""));
+  });
+
+  it("autoSize / textAreaClassName 等透传照旧", () => {
+    render(<TextArea textAreaClassName="my-area" autoSize={{ minRows: 3 }} />);
+    const ta = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(ta.className).toContain("my-area");
+  });
+});