From a1a907dcb2e797baded671fe5d3d48a9a55bcf21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Wed, 18 Mar 2026 09:31:07 +0800
Subject: [PATCH 01/10] feat: migrate textarea implementation into rc-input

---
 README.md                                     | 103 +++-
 assets/index.less                             |  22 +
 docs/demo/textarea.md                         |  22 +
 docs/examples/textarea-allow-clear.tsx        |  25 +
 docs/examples/textarea-auto-size.tsx          |  39 ++
 docs/examples/textarea-basic.tsx              |  40 ++
 docs/examples/textarea-show-count.tsx         |  57 ++
 package.json                                  |   1 +
 src/ResizableTextArea.tsx                     | 166 ++++++
 src/TextArea.tsx                              | 273 ++++++++++
 src/calculateNodeHeight.tsx                   | 185 +++++++
 src/index.tsx                                 |  23 +-
 src/interface.ts                              |  44 ++
 tests/ResizableTextArea.test.tsx              |  23 +
 tests/TextArea.allowClear.test.tsx            | 143 +++++
 tests/TextArea.count.test.tsx                 | 152 ++++++
 tests/TextArea.focus.test.tsx                 |  96 ++++
 tests/TextArea.showCount.test.tsx             |  79 +++
 tests/TextArea.test.tsx                       | 487 ++++++++++++++++++
 .../TextArea.allowClear.test.tsx.snap         | 127 +++++
 tests/__snapshots__/TextArea.test.tsx.snap    |  72 +++
 tests/setupFilesAfterEnv.js                   |   9 +
 tests/utils.ts                                |  32 ++
 23 files changed, 2192 insertions(+), 28 deletions(-)
 create mode 100644 docs/demo/textarea.md
 create mode 100644 docs/examples/textarea-allow-clear.tsx
 create mode 100644 docs/examples/textarea-auto-size.tsx
 create mode 100644 docs/examples/textarea-basic.tsx
 create mode 100644 docs/examples/textarea-show-count.tsx
 create mode 100644 src/ResizableTextArea.tsx
 create mode 100644 src/TextArea.tsx
 create mode 100644 src/calculateNodeHeight.tsx
 create mode 100644 tests/ResizableTextArea.test.tsx
 create mode 100644 tests/TextArea.allowClear.test.tsx
 create mode 100644 tests/TextArea.count.test.tsx
 create mode 100644 tests/TextArea.focus.test.tsx
 create mode 100644 tests/TextArea.showCount.test.tsx
 create mode 100644 tests/TextArea.test.tsx
 create mode 100644 tests/__snapshots__/TextArea.allowClear.test.tsx.snap
 create mode 100644 tests/__snapshots__/TextArea.test.tsx.snap
 create mode 100644 tests/utils.ts

diff --git a/README.md b/README.md
index 6200c41..5f44699 100644
--- a/README.md
+++ b/README.md
@@ -39,31 +39,61 @@ import { render } from 'react-dom';
 render(<Input placeholder="input" allowClear />, mountNode);
 ```
 
+```js
+import Input from '@rc-component/input';
+import { render } from 'react-dom';
+
+render(<Input.TextArea autoSize showCount />, mountNode);
+```
+
 ## API
 
-| Property              | Type                                                                               | Default  | Description                                                                                                                                                         |
-| --------------------- | ---------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| prefixCls             | string                                                                             | rc-input |                                                                                                                                                                     |
-| className             | string                                                                             | ''       | additional class name of input                                                                                                                                      |
-| style                 | React.CSSProperties                                                                |          | style properties of input                                                                                                                                           |
-| affixWrapperClassName | string                                                                             | -        | className with '@rc-component/input-affix-wrapper'                                                                                                                             |
-| groupClassName        | string                                                                             | -        | className with '@rc-component/input-group-wrapper'                                                                                                                             |
-| wrapperClassName      | string                                                                             | -        | className with '@rc-component/input-wrapper'                                                                                                                                   |
-| addonAfter            | ReactNode                                                                          | -        | The label text displayed after (on the right side of) the input field                                                                                               |
-| addonBefore           | ReactNode                                                                          | -        | The label text displayed before (on the left side of) the input field                                                                                               |
-| allowClear            | boolean &#124; { clearIcon: ReactNode }                                                                            | false    | If allow to remove input content with clear icon                                                                                                                    |
-| bordered              | boolean                                                                            | true     | Whether has border style                                                                                                                                            |
-| defaultValue          | string                                                                             | -        | The initial input content                                                                                                                                           |
-| disabled              | boolean                                                                            | false    | Whether the input is disabled                                                                                                                                       |
-| id                    | string                                                                             | -        | The ID for input                                                                                                                                                    |
-| maxLength             | number                                                                             | -        | The max length                                                                                                                                                      |
+| Property              | Type                                                                                              | Default  | Description                                                                                                                                                         |
+| --------------------- | ------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| prefixCls             | string                                                                                            | rc-input |                                                                                                                                                                     |
+| className             | string                                                                                            | ''       | additional class name of input                                                                                                                                      |
+| style                 | React.CSSProperties                                                                               |          | style properties of input                                                                                                                                           |
+| affixWrapperClassName | string                                                                                            | -        | className with '@rc-component/input-affix-wrapper'                                                                                                                  |
+| groupClassName        | string                                                                                            | -        | className with '@rc-component/input-group-wrapper'                                                                                                                  |
+| wrapperClassName      | string                                                                                            | -        | className with '@rc-component/input-wrapper'                                                                                                                        |
+| addonAfter            | ReactNode                                                                                         | -        | The label text displayed after (on the right side of) the input field                                                                                               |
+| addonBefore           | ReactNode                                                                                         | -        | The label text displayed before (on the left side of) the input field                                                                                               |
+| allowClear            | boolean &#124; { clearIcon: ReactNode }                                                           | false    | If allow to remove input content with clear icon                                                                                                                    |
+| bordered              | boolean                                                                                           | true     | Whether has border style                                                                                                                                            |
+| defaultValue          | string                                                                                            | -        | The initial input content                                                                                                                                           |
+| disabled              | boolean                                                                                           | false    | Whether the input is disabled                                                                                                                                       |
+| id                    | string                                                                                            | -        | The ID for input                                                                                                                                                    |
+| maxLength             | number                                                                                            | -        | The max length                                                                                                                                                      |
 | showCount             | boolean &#124; { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode } | false    | Whether show text count                                                                                                                                             |
-| prefix                | ReactNode                                                                          | -        | The prefix icon for the Input                                                                                                                                       |
-| suffix                | ReactNode                                                                          | -        | The suffix icon for the Input                                                                                                                                       |
-| type                  | string                                                                             | `text`   | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) |
-| value                 | string                                                                             | -        | The input content value                                                                                                                                             |
-| onChange              | function(e)                                                                        | -        | Callback when user input                                                                                                                                            |
-| onPressEnter          | function(e)                                                                        | -        | The callback function that is triggered when Enter key is pressed                                                                                                   |
+| prefix                | ReactNode                                                                                         | -        | The prefix icon for the Input                                                                                                                                       |
+| suffix                | ReactNode                                                                                         | -        | The suffix icon for the Input                                                                                                                                       |
+| type                  | string                                                                                            | `text`   | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) |
+| value                 | string                                                                                            | -        | The input content value                                                                                                                                             |
+| onChange              | function(e)                                                                                       | -        | Callback when user input                                                                                                                                            |
+| onPressEnter          | function(e)                                                                                       | -        | The callback function that is triggered when Enter key is pressed                                                                                                   |
+
+## TextArea
+
+`rc-textarea` has been migrated into `@rc-component/input`. Use `Input.TextArea` or the named `TextArea` export for all textarea-related features.
+
+```js
+import Input, { TextArea } from '@rc-component/input';
+
+<Input.TextArea allowClear autoSize />;
+<TextArea showCount maxLength={100} />;
+```
+
+| Property     | Type                        | Default     | Description                                                                                    |
+| ------------ | --------------------------- | ----------- | ---------------------------------------------------------------------------------------------- |
+| prefixCls    | string                      | rc-textarea |                                                                                                |
+| className    | string                      | ''          | additional class name of textarea                                                              |
+| style        | React.CSSProperties         | -           | style properties of textarea                                                                   |
+| autoSize     | boolean \| object           | -           | Height autosize feature, can be set to `true\|false` or an object `{ minRows: 2, maxRows: 6 }` |
+| allowClear   | boolean \| { clearIcon }    | false       | If allow to remove textarea content with clear icon                                            |
+| showCount    | boolean \| { formatter }    | false       | Whether show text count                                                                        |
+| count        | CountConfig                 | -           | Custom count strategy / max / exceed formatter                                                 |
+| onPressEnter | function(e)                 | -           | The callback function that is triggered when Enter key is pressed                              |
+| onResize     | function({ width, height }) | -           | The callback function that is triggered when resize                                            |
 
 ## inputRef
 
@@ -71,12 +101,12 @@ render(<Input placeholder="input" allowClear />, mountNode);
 const inputRef = useRef(null);
 
 useEffect(() => {
-  inputRef.current.focus();// the input will get focus
-  inputRef.current.blur();// the input will lose focus
-  console.log(inputRef.current.input);// The origin input element
+  inputRef.current.focus(); // the input will get focus
+  inputRef.current.blur(); // the input will lose focus
+  console.log(inputRef.current.input); // The origin input element
 }, []);
 // ....
-<Input ref={inputRef} />
+<Input ref={inputRef} />;
 ```
 
 | Property | Type                                    | Description                       |
@@ -85,6 +115,27 @@ useEffect(() => {
 | blur     | `() => void`                            | The input loses focus when called |
 | input    | `HTMLInputElement \| null`              | The origin input element          |
 
+## textareaRef
+
+```tsx | pure
+const textareaRef = useRef(null);
+
+useEffect(() => {
+  textareaRef.current.focus();
+  textareaRef.current.blur();
+  console.log(textareaRef.current.resizableTextArea);
+}, []);
+
+<Input.TextArea ref={textareaRef} />;
+```
+
+| Property          | Type                   | Description                              |
+| ----------------- | ---------------------- | ---------------------------------------- |
+| focus             | `() => void`           | The textarea get focus when called       |
+| blur              | `() => void`           | The textarea loses focus when called     |
+| resizableTextArea | `ResizableTextAreaRef` | Wrapped resizable textarea instance      |
+| nativeElement     | `HTMLElement \| null`  | The outer holder element or textarea DOM |
+
 ## Development
 
 ```
diff --git a/assets/index.less b/assets/index.less
index 3c96198..eb3b50f 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -32,3 +32,25 @@
     }
   }
 }
+
+@textarea-prefix-cls: rc-textarea;
+
+.rc-textarea-affix-wrapper {
+  display: inline-block;
+  box-sizing: border-box;
+
+  textarea {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 1px solid #1677ff;
+  }
+}
+
+.@{textarea-prefix-cls}-out-of-range {
+  &,
+  & textarea {
+    color: red;
+  }
+}
diff --git a/docs/demo/textarea.md b/docs/demo/textarea.md
new file mode 100644
index 0000000..3d3a1a1
--- /dev/null
+++ b/docs/demo/textarea.md
@@ -0,0 +1,22 @@
+---
+title: TextArea
+nav:
+  title: Demo
+  path: /demo
+---
+
+## Basic
+
+<code src="../examples/textarea-basic.tsx"></code>
+
+## Auto Size
+
+<code src="../examples/textarea-auto-size.tsx"></code>
+
+## Allow Clear
+
+<code src="../examples/textarea-allow-clear.tsx"></code>
+
+## Show Count
+
+<code src="../examples/textarea-show-count.tsx"></code>
diff --git a/docs/examples/textarea-allow-clear.tsx b/docs/examples/textarea-allow-clear.tsx
new file mode 100644
index 0000000..f416f8c
--- /dev/null
+++ b/docs/examples/textarea-allow-clear.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable no-console */
+import Input from '@rc-component/input';
+import React, { useState, type ChangeEvent } from 'react';
+
+const TextArea = Input.TextArea;
+
+export default function App() {
+  const [value, setValue] = useState('hello\nworld');
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const {
+      target: { value: currentValue },
+    } = e;
+    setValue(currentValue);
+  };
+
+  return (
+    <div>
+      <p>Uncontrolled</p>
+      <TextArea autoSize allowClear />
+      <p>controlled</p>
+      <TextArea value={value} onChange={onChange} allowClear />
+    </div>
+  );
+}
diff --git a/docs/examples/textarea-auto-size.tsx b/docs/examples/textarea-auto-size.tsx
new file mode 100644
index 0000000..2195306
--- /dev/null
+++ b/docs/examples/textarea-auto-size.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+import Input, { type TextAreaProps } from '@rc-component/input';
+import React, { useState, type ChangeEvent } from 'react';
+
+const TextArea = Input.TextArea;
+
+export default function App() {
+  const [value, setValue] = useState('hello\nworld');
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const {
+      target: { value: currentValue },
+    } = e;
+    setValue(currentValue);
+  };
+
+  const onResize: TextAreaProps['onResize'] = ({ width, height }) => {
+    console.log(`size is changed, width:${width} height:${height}`);
+  };
+
+  return (
+    <div>
+      <p>when set to true</p>
+      <TextArea
+        autoSize
+        onResize={onResize}
+        value={value}
+        onChange={onChange}
+      />
+      <p>when set to object of minRows and maxRows</p>
+      <TextArea
+        autoSize={{ minRows: 5, maxRows: 15 }}
+        onResize={onResize}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
diff --git a/docs/examples/textarea-basic.tsx b/docs/examples/textarea-basic.tsx
new file mode 100644
index 0000000..567d47d
--- /dev/null
+++ b/docs/examples/textarea-basic.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+import Input, { type TextAreaProps } from '@rc-component/input';
+import React, { useState, type ChangeEvent, type KeyboardEvent } from 'react';
+
+const TextArea = Input.TextArea;
+
+export default function App() {
+  const [value, setValue] = useState('');
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const {
+      target: { value: currentValue },
+    } = e;
+    console.log(e.target.value);
+    setValue(currentValue);
+  };
+
+  const onResize: TextAreaProps['onResize'] = ({ width, height }) => {
+    console.log(`size is changed, width:${width} height:${height}`);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onPressEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    console.log(`enter key is pressed`);
+  };
+
+  return (
+    <div>
+      <TextArea
+        prefixCls="custom-textarea"
+        onPressEnter={onPressEnter}
+        onResize={onResize}
+        value={value}
+        onChange={onChange}
+        autoFocus
+        onFocus={() => console.log('focus')}
+      />
+    </div>
+  );
+}
diff --git a/docs/examples/textarea-show-count.tsx b/docs/examples/textarea-show-count.tsx
new file mode 100644
index 0000000..c030f9f
--- /dev/null
+++ b/docs/examples/textarea-show-count.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+import Input from '@rc-component/input';
+import React, { useState, type ChangeEvent } from 'react';
+import '../../assets/index.less';
+
+const TextArea = Input.TextArea;
+
+export default function App() {
+  const [value, setValue] = useState('hello\nworld');
+
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const {
+      target: { value: currentValue },
+    } = e;
+    setValue(currentValue);
+  };
+
+  return (
+    <div>
+      <p>Uncontrolled</p>
+      <TextArea autoSize showCount />
+      <p>controlled</p>
+      <TextArea value={value} onChange={onChange} showCount maxLength={100} />
+      <p>with height</p>
+      <TextArea
+        value={value}
+        onChange={onChange}
+        showCount
+        style={{ height: 200, width: '100%', resize: 'vertical' }}
+      />
+      <hr />
+      <p>Count.exceedFormatter</p>
+      <TextArea
+        defaultValue="👨‍👨‍👧‍👦"
+        count={{
+          show: true,
+          max: 5,
+        }}
+      />
+      <TextArea
+        defaultValue="🔥"
+        count={{
+          show: true,
+          max: 5,
+          exceedFormatter: (val, { max }) => {
+            const segments = [...new Intl.Segmenter().segment(val)];
+
+            return segments
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join('');
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/package.json b/package.json
index c2aa175..1f57553 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@rc-component/resize-observer": "^1.1.1",
     "@rc-component/util": "^1.4.0",
     "clsx": "^2.1.1"
   },
diff --git a/src/ResizableTextArea.tsx b/src/ResizableTextArea.tsx
new file mode 100644
index 0000000..367d434
--- /dev/null
+++ b/src/ResizableTextArea.tsx
@@ -0,0 +1,166 @@
+import ResizeObserver from '@rc-component/resize-observer';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import raf from '@rc-component/util/lib/raf';
+import { clsx } from 'clsx';
+import * as React from 'react';
+import type { ResizableTextAreaRef, TextAreaProps } from './interface';
+import calculateAutoSizeStyle from './calculateNodeHeight';
+
+const RESIZE_START = 0 as const;
+const RESIZE_MEASURING = 1 as const;
+const RESIZE_STABLE = 2 as const;
+
+type ResizeState =
+  | typeof RESIZE_START
+  | typeof RESIZE_MEASURING
+  | typeof RESIZE_STABLE;
+
+const ResizableTextArea = React.forwardRef<ResizableTextAreaRef, TextAreaProps>(
+  (props, ref) => {
+    const {
+      prefixCls,
+      defaultValue,
+      value,
+      autoSize,
+      onResize,
+      className,
+      style,
+      disabled,
+      onChange,
+      // Test only
+      onInternalAutoSize,
+      ...restProps
+    } = props as TextAreaProps & {
+      onInternalAutoSize?: VoidFunction;
+    };
+
+    // =============================== Value ================================
+    const [internalValue, setMergedValue] = useControlledState(
+      defaultValue,
+      value,
+    );
+    const mergedValue = internalValue ?? '';
+
+    const onInternalChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
+      event,
+    ) => {
+      setMergedValue(event.target.value);
+      onChange?.(event);
+    };
+
+    // ================================ Ref =================================
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      textArea: textareaRef.current!,
+    }));
+
+    // ============================== AutoSize ==============================
+    const [minRows, maxRows] = React.useMemo(() => {
+      if (autoSize && typeof autoSize === 'object') {
+        return [autoSize.minRows, autoSize.maxRows];
+      }
+
+      return [];
+    }, [autoSize]);
+
+    const needAutoSize = !!autoSize;
+
+    // =============================== Resize ===============================
+    const [resizeState, setResizeState] =
+      React.useState<ResizeState>(RESIZE_STABLE);
+    const [autoSizeStyle, setAutoSizeStyle] =
+      React.useState<React.CSSProperties>();
+
+    const startResize = () => {
+      setResizeState(RESIZE_START);
+      if (process.env.NODE_ENV === 'test') {
+        onInternalAutoSize?.();
+      }
+    };
+
+    // Change to trigger resize measure
+    useLayoutEffect(() => {
+      if (needAutoSize) {
+        startResize();
+      }
+    }, [value, minRows, maxRows, needAutoSize]);
+
+    useLayoutEffect(() => {
+      if (resizeState === RESIZE_START) {
+        setResizeState(RESIZE_MEASURING);
+      } else if (resizeState === RESIZE_MEASURING) {
+        const textareaStyles = calculateAutoSizeStyle(
+          textareaRef.current!,
+          false,
+          minRows,
+          maxRows,
+        );
+
+        setResizeState(RESIZE_STABLE);
+        setAutoSizeStyle(textareaStyles);
+      } else {
+        // https://github.com/react-component/textarea/pull/23
+        // Firefox has blink issue before but fixed in latest version.
+      }
+    }, [resizeState]);
+
+    // We lock resize trigger by raf to avoid Safari warning
+    const resizeRafRef = React.useRef<number | undefined>(undefined);
+    const cleanRaf = () => {
+      if (resizeRafRef.current !== undefined) {
+        raf.cancel(resizeRafRef.current);
+      }
+    };
+
+    const onInternalResize = (size: { width: number; height: number }) => {
+      if (resizeState === RESIZE_STABLE) {
+        onResize?.(size);
+
+        if (autoSize) {
+          cleanRaf();
+          resizeRafRef.current = raf(() => {
+            startResize();
+          });
+        }
+      }
+    };
+
+    React.useEffect(() => cleanRaf, []);
+
+    // =============================== Render ===============================
+    const mergedAutoSizeStyle = needAutoSize ? autoSizeStyle : null;
+
+    const mergedStyle: React.CSSProperties = {
+      ...style,
+      ...mergedAutoSizeStyle,
+    };
+
+    if (resizeState === RESIZE_START || resizeState === RESIZE_MEASURING) {
+      mergedStyle.overflowY = 'hidden';
+      mergedStyle.overflowX = 'hidden';
+    }
+
+    return (
+      <ResizeObserver
+        onResize={onInternalResize}
+        disabled={!(autoSize || onResize)}
+      >
+        <textarea
+          {...restProps}
+          ref={textareaRef}
+          style={mergedStyle}
+          className={clsx(prefixCls, className, {
+            [`${prefixCls}-disabled`]: disabled,
+          })}
+          disabled={disabled}
+          value={mergedValue as string}
+          onChange={onInternalChange}
+        />
+      </ResizeObserver>
+    );
+  },
+);
+
+export default ResizableTextArea;
diff --git a/src/TextArea.tsx b/src/TextArea.tsx
new file mode 100644
index 0000000..9a0e0b0
--- /dev/null
+++ b/src/TextArea.tsx
@@ -0,0 +1,273 @@
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
+import { clsx } from 'clsx';
+import type { ReactNode } from 'react';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import type { HolderRef } from './BaseInput';
+import BaseInput from './BaseInput';
+import useCount from './hooks/useCount';
+import type {
+  ResizableTextAreaRef,
+  TextAreaProps,
+  TextAreaRef,
+} from './interface';
+import ResizableTextArea from './ResizableTextArea';
+import { resolveOnChange } from './utils/commonUtils';
+
+const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
+  (
+    {
+      defaultValue,
+      value: customValue,
+      onFocus,
+      onBlur,
+      onChange,
+      allowClear,
+      maxLength,
+      onCompositionStart,
+      onCompositionEnd,
+      suffix,
+      prefixCls = 'rc-textarea',
+      showCount,
+      count,
+      className,
+      style,
+      disabled,
+      hidden,
+      classNames,
+      styles,
+      onResize,
+      onClear,
+      onPressEnter,
+      readOnly,
+      autoSize,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useControlledState(defaultValue, customValue);
+    const formatValue =
+      value === undefined || value === null ? '' : String(value);
+
+    const [focused, setFocused] = React.useState<boolean>(false);
+
+    const compositionRef = React.useRef(false);
+
+    const [textareaResized, setTextareaResized] = React.useState<
+      boolean | null
+    >(null);
+
+    // =============================== Ref ================================
+    const holderRef = useRef<HolderRef>(null);
+    const resizableTextAreaRef = useRef<ResizableTextAreaRef>(null);
+    const getTextArea = () => resizableTextAreaRef.current?.textArea!;
+
+    const focus = () => {
+      getTextArea().focus();
+    };
+
+    useImperativeHandle(ref, () => ({
+      resizableTextArea: resizableTextAreaRef.current!,
+      focus,
+      blur: () => {
+        getTextArea().blur();
+      },
+      nativeElement: holderRef.current?.nativeElement || getTextArea(),
+    }));
+
+    useEffect(() => {
+      setFocused((prev) => !disabled && prev);
+    }, [disabled]);
+
+    // =========================== Select Range ===========================
+    const [selection, setSelection] = React.useState<
+      [start: number, end: number] | null
+    >(null);
+
+    React.useEffect(() => {
+      if (selection) {
+        getTextArea().setSelectionRange(...selection);
+      }
+    }, [selection]);
+
+    // ============================== Count ===============================
+    const countConfig = useCount(count, showCount);
+    const mergedMax = countConfig.max ?? maxLength;
+
+    // Max length value
+    const hasMaxLength = Number(mergedMax) > 0;
+
+    const valueLength = countConfig.strategy(formatValue);
+
+    const isOutOfRange = !!mergedMax && valueLength > mergedMax;
+
+    // ============================== Change ==============================
+    const triggerChange = (
+      e:
+        | React.ChangeEvent<HTMLTextAreaElement>
+        | React.CompositionEvent<HTMLTextAreaElement>,
+      currentValue: string,
+    ) => {
+      let cutValue = currentValue;
+
+      if (
+        !compositionRef.current &&
+        countConfig.exceedFormatter &&
+        countConfig.max &&
+        countConfig.strategy(currentValue) > countConfig.max
+      ) {
+        cutValue = countConfig.exceedFormatter(currentValue, {
+          max: countConfig.max,
+        });
+
+        if (currentValue !== cutValue) {
+          setSelection([
+            getTextArea().selectionStart || 0,
+            getTextArea().selectionEnd || 0,
+          ]);
+        }
+      }
+      setValue(cutValue);
+
+      resolveOnChange(e.currentTarget, e, onChange, cutValue);
+    };
+
+    // =========================== Value Update ===========================
+    const onInternalCompositionStart: React.CompositionEventHandler<
+      HTMLTextAreaElement
+    > = (e) => {
+      compositionRef.current = true;
+      onCompositionStart?.(e);
+    };
+
+    const onInternalCompositionEnd: React.CompositionEventHandler<
+      HTMLTextAreaElement
+    > = (e) => {
+      compositionRef.current = false;
+      triggerChange(e, e.currentTarget.value);
+      onCompositionEnd?.(e);
+    };
+
+    const onInternalChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      triggerChange(e, e.target.value);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && onPressEnter && !e.nativeEvent.isComposing) {
+        onPressEnter(e);
+      }
+      onKeyDown?.(e);
+    };
+
+    const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    // ============================== Reset ===============================
+    const handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      setValue('');
+      focus();
+      resolveOnChange(getTextArea(), e, onChange);
+    };
+
+    let suffixNode = suffix;
+    let dataCount: ReactNode;
+    if (countConfig.show) {
+      if (countConfig.showFormatter) {
+        dataCount = countConfig.showFormatter({
+          value: formatValue,
+          count: valueLength,
+          maxLength: mergedMax,
+        });
+      } else {
+        dataCount = `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`;
+      }
+
+      suffixNode = (
+        <>
+          {suffixNode}
+          <span
+            className={clsx(`${prefixCls}-data-count`, classNames?.count)}
+            style={styles?.count}
+          >
+            {dataCount}
+          </span>
+        </>
+      );
+    }
+
+    const handleResize: TextAreaProps['onResize'] = (size) => {
+      onResize?.(size);
+      if (getTextArea()?.style.height) {
+        setTextareaResized(true);
+      }
+    };
+
+    const isPureTextArea = !autoSize && !showCount && !allowClear;
+
+    return (
+      <BaseInput
+        ref={holderRef}
+        value={formatValue}
+        allowClear={allowClear}
+        handleReset={handleReset}
+        suffix={suffixNode}
+        prefixCls={prefixCls}
+        classNames={{
+          ...classNames,
+          affixWrapper: clsx(classNames?.affixWrapper, {
+            [`${prefixCls}-show-count`]: showCount,
+            [`${prefixCls}-textarea-allow-clear`]: allowClear,
+          }),
+        }}
+        disabled={disabled}
+        focused={focused}
+        className={clsx(className, isOutOfRange && `${prefixCls}-out-of-range`)}
+        style={{
+          ...style,
+          ...(textareaResized && !isPureTextArea ? { height: 'auto' } : {}),
+        }}
+        dataAttrs={
+          typeof dataCount === 'string'
+            ? {
+                affixWrapper: {
+                  'data-count': dataCount,
+                },
+              }
+            : undefined
+        }
+        styles={styles}
+        hidden={hidden}
+        readOnly={readOnly}
+        onClear={onClear}
+      >
+        <ResizableTextArea
+          {...rest}
+          autoSize={autoSize}
+          maxLength={maxLength}
+          onKeyDown={handleKeyDown}
+          onChange={onInternalChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onCompositionStart={onInternalCompositionStart}
+          onCompositionEnd={onInternalCompositionEnd}
+          className={clsx(classNames?.textarea)}
+          style={{ resize: style?.resize, ...styles?.textarea }}
+          disabled={disabled}
+          prefixCls={prefixCls}
+          onResize={handleResize}
+          ref={resizableTextAreaRef}
+          readOnly={readOnly}
+        />
+      </BaseInput>
+    );
+  },
+);
+
+export default TextArea;
diff --git a/src/calculateNodeHeight.tsx b/src/calculateNodeHeight.tsx
new file mode 100644
index 0000000..e16c9fd
--- /dev/null
+++ b/src/calculateNodeHeight.tsx
@@ -0,0 +1,185 @@
+// Thanks to https://github.com/andreypopp/react-textarea-autosize/
+import type React from 'react';
+
+/**
+ * calculateNodeHeight(uiTextNode, useCache = false)
+ */
+
+const HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
+  pointer-events: none !important;
+`;
+
+const SIZING_STYLE = [
+  'letter-spacing',
+  'line-height',
+  'padding-top',
+  'padding-bottom',
+  'font-family',
+  'font-weight',
+  'font-size',
+  'font-variant',
+  'text-rendering',
+  'text-transform',
+  'width',
+  'text-indent',
+  'padding-left',
+  'padding-right',
+  'border-width',
+  'box-sizing',
+  'word-break',
+  'white-space',
+];
+
+export interface NodeType {
+  sizingStyle: string;
+  paddingSize: number;
+  borderSize: number;
+  boxSizing: string;
+}
+
+const computedStyleCache: Record<string, NodeType> = {};
+let hiddenTextarea: HTMLTextAreaElement;
+
+export function calculateNodeStyling(node: HTMLElement, useCache = false) {
+  const nodeRef = (node.getAttribute('id') ||
+    node.getAttribute('data-reactid') ||
+    node.getAttribute('name')) as string;
+
+  if (useCache && computedStyleCache[nodeRef]) {
+    return computedStyleCache[nodeRef];
+  }
+
+  const style = window.getComputedStyle(node);
+
+  const boxSizing =
+    style.getPropertyValue('box-sizing') ||
+    style.getPropertyValue('-moz-box-sizing') ||
+    style.getPropertyValue('-webkit-box-sizing');
+
+  const paddingSize =
+    parseFloat(style.getPropertyValue('padding-bottom')) +
+    parseFloat(style.getPropertyValue('padding-top'));
+
+  const borderSize =
+    parseFloat(style.getPropertyValue('border-bottom-width')) +
+    parseFloat(style.getPropertyValue('border-top-width'));
+
+  const sizingStyle = SIZING_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`,
+  ).join(';');
+
+  const nodeInfo: NodeType = {
+    sizingStyle,
+    paddingSize,
+    borderSize,
+    boxSizing,
+  };
+
+  if (useCache && nodeRef) {
+    computedStyleCache[nodeRef] = nodeInfo;
+  }
+
+  return nodeInfo;
+}
+
+export default function calculateAutoSizeStyle(
+  uiTextNode: HTMLTextAreaElement,
+  useCache = false,
+  minRows: number | null = null,
+  maxRows: number | null = null,
+): React.CSSProperties {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea');
+    hiddenTextarea.setAttribute('tab-index', '-1');
+    hiddenTextarea.setAttribute('aria-hidden', 'true');
+    // fix: A form field element should have an id or name attribute
+    // A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+    hiddenTextarea.setAttribute('name', 'hiddenTextarea');
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  // Fix wrap="off" issue
+  // https://github.com/ant-design/ant-design/issues/6577
+  if (uiTextNode.getAttribute('wrap')) {
+    hiddenTextarea.setAttribute(
+      'wrap',
+      uiTextNode.getAttribute('wrap') as string,
+    );
+  } else {
+    hiddenTextarea.removeAttribute('wrap');
+  }
+
+  // Copy all CSS properties that have an impact on the height of the content in
+  // the textbox
+  const { paddingSize, borderSize, boxSizing, sizingStyle } =
+    calculateNodeStyling(uiTextNode, useCache);
+
+  // Need to have the overflow attribute to hide the scrollbar otherwise
+  // text-lines will not calculated properly as the shadow will technically be
+  // narrower for content
+  hiddenTextarea.setAttribute(
+    'style',
+    `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`,
+  );
+  hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
+
+  let minHeight: number | undefined;
+  let maxHeight: number | undefined;
+  let overflowY: React.CSSProperties['overflowY'];
+
+  let height = hiddenTextarea.scrollHeight;
+
+  if (boxSizing === 'border-box') {
+    // border-box: add border, since height = content + padding + border
+    height += borderSize;
+  } else if (boxSizing === 'content-box') {
+    // remove padding, since height = content
+    height -= paddingSize;
+  }
+
+  if (minRows !== null || maxRows !== null) {
+    // measure height of a textarea with a single row
+    hiddenTextarea.value = ' ';
+    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+    if (minRows !== null) {
+      minHeight = singleRowHeight * minRows;
+      if (boxSizing === 'border-box') {
+        minHeight = minHeight + paddingSize + borderSize;
+      }
+      height = Math.max(minHeight, height);
+    }
+    if (maxRows !== null) {
+      maxHeight = singleRowHeight * maxRows;
+      if (boxSizing === 'border-box') {
+        maxHeight = maxHeight + paddingSize + borderSize;
+      }
+      overflowY = height > maxHeight ? undefined : 'hidden';
+      height = Math.min(maxHeight, height);
+    }
+  }
+
+  const style: React.CSSProperties = {
+    height,
+    overflowY,
+    resize: 'none',
+  };
+
+  if (minHeight) {
+    style.minHeight = minHeight;
+  }
+  if (maxHeight) {
+    style.maxHeight = maxHeight;
+  }
+
+  return style;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 56cf330..c8db5c3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,27 @@
 import BaseInput from './BaseInput';
 import Input from './Input';
+import TextArea from './TextArea';
 
 export { BaseInput };
+export { default as ResizableTextArea } from './ResizableTextArea';
 
-export type { InputProps, InputRef } from './interface';
+export type {
+  AutoSizeType,
+  InputProps,
+  InputRef,
+  ResizableTextAreaRef,
+  TextAreaProps,
+  TextAreaRef,
+} from './interface';
 
-export default Input;
+type CompoundedInput = typeof Input & {
+  TextArea: typeof TextArea;
+};
+
+const TypedInput = Input as CompoundedInput;
+
+TypedInput.TextArea = TextArea;
+
+export { TextArea };
+
+export default TypedInput;
diff --git a/src/interface.ts b/src/interface.ts
index 491d70c..d63d0e2 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -5,6 +5,7 @@ import type {
   MouseEventHandler,
   ReactElement,
   ReactNode,
+  TextareaHTMLAttributes,
 } from 'react';
 import type { LiteralUnion } from './utils/types';
 import type { InputFocusOptions } from '@rc-component/util/lib/Dom/focus';
@@ -159,3 +160,46 @@ export interface InputRef {
 export interface ChangeEventInfo {
   source: 'compositionEnd' | 'change';
 }
+
+export interface AutoSizeType {
+  minRows?: number;
+  maxRows?: number;
+}
+
+// To compatible with origin usage. We have to wrap this
+export interface ResizableTextAreaRef {
+  textArea: HTMLTextAreaElement;
+}
+
+export type ValueOrTextAreaValue =
+  | TextareaHTMLAttributes<HTMLTextAreaElement>['value']
+  | bigint;
+
+export type TextAreaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'onResize' | 'value'
+> & {
+  value?: ValueOrTextAreaValue;
+  prefixCls?: string;
+  className?: string;
+  style?: CSSProperties;
+  autoSize?: boolean | AutoSizeType;
+  onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onResize?: (size: { width: number; height: number }) => void;
+  classNames?: CommonInputProps['classNames'] & {
+    textarea?: string;
+    count?: string;
+  };
+  styles?: CommonInputProps['styles'] & {
+    textarea?: CSSProperties;
+    count?: CSSProperties;
+  };
+} & Pick<BaseInputProps, 'allowClear' | 'suffix'> &
+  Pick<InputProps, 'showCount' | 'count' | 'onClear'>;
+
+export interface TextAreaRef {
+  resizableTextArea: ResizableTextAreaRef;
+  focus: () => void;
+  blur: () => void;
+  nativeElement: HTMLElement | null;
+}
diff --git a/tests/ResizableTextArea.test.tsx b/tests/ResizableTextArea.test.tsx
new file mode 100644
index 0000000..60b462d
--- /dev/null
+++ b/tests/ResizableTextArea.test.tsx
@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import type { ResizableTextAreaRef, TextAreaProps } from '../src';
+import { ResizableTextArea } from '../src';
+
+const resizableTextAreaProps = () => (global as any).textAreaProps;
+
+jest.mock('../src/ResizableTextArea', () => {
+  const ReactReal: typeof React = jest.requireActual('react');
+  const Resizable = jest.requireActual('../src/ResizableTextArea');
+  const ResizableComponent = Resizable.default;
+  return ReactReal.forwardRef<ResizableTextAreaRef, TextAreaProps>(
+    (props, ref) => {
+      (global as any).textAreaProps = props;
+      return <ResizableComponent {...props} ref={ref} />;
+    },
+  );
+});
+
+it('should have no onPressEnter prop', () => {
+  render(<ResizableTextArea defaultValue="test" />);
+  expect(resizableTextAreaProps().onPressEnter).toBeUndefined();
+});
diff --git a/tests/TextArea.allowClear.test.tsx b/tests/TextArea.allowClear.test.tsx
new file mode 100644
index 0000000..1655430
--- /dev/null
+++ b/tests/TextArea.allowClear.test.tsx
@@ -0,0 +1,143 @@
+import { fireEvent, render } from '@testing-library/react';
+import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
+import React from 'react';
+import Input from '../src';
+
+const TextArea = Input.TextArea;
+
+describe('should support allowClear', () => {
+  it('should change type when click', () => {
+    const { container } = render(<TextArea allowClear />);
+    fireEvent.change(container.querySelector('textarea')!, {
+      target: { value: '111' },
+    });
+    expect(container.querySelector('textarea')?.value).toEqual('111');
+    expect(
+      container.querySelector('.rc-textarea-clear-icon-hidhen'),
+    ).toBeFalsy();
+    fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
+    expect(
+      container.querySelector('.rc-textarea-clear-icon-hidden'),
+    ).toBeTruthy();
+    expect(container.querySelector('textarea')?.value).toEqual('');
+  });
+
+  it('should not show icon if value is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map((val) =>
+      render(
+        <TextArea
+          allowClear
+          value={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']}
+        />,
+      ),
+    );
+    wrappers.forEach(({ asFragment, container }) => {
+      expect(container.querySelector('textarea')?.value).toEqual('');
+      expect(
+        container.querySelector('.rc-textarea-clear-icon-hidden'),
+      ).toBeTruthy();
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('should not show icon if defaultValue is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map((val) =>
+      render(
+        <TextArea
+          allowClear
+          defaultValue={
+            val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']
+          }
+        />,
+      ),
+    );
+    wrappers.forEach(({ asFragment, container }) => {
+      expect(container.querySelector('textarea')?.value).toEqual('');
+      expect(
+        container.querySelector('.rc-textarea-clear-icon-hidden'),
+      ).toBeTruthy();
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('should trigger event correctly', () => {
+    let argumentEventObjectType;
+    let argumentEventObjectValue;
+    const onChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+      argumentEventObjectType = e.type;
+      argumentEventObjectValue = e.target.value;
+    };
+    const { container } = render(
+      <TextArea allowClear defaultValue="111" onChange={onChange} />,
+    );
+    fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
+    expect(argumentEventObjectType).toBe('click');
+    expect(argumentEventObjectValue).toBe('');
+    expect(container.querySelector('textarea')?.value).toBe('');
+  });
+
+  it('should trigger event correctly on controlled mode', () => {
+    let argumentEventObjectType;
+    let argumentEventObjectValue;
+    const onChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+      argumentEventObjectType = e.type;
+      argumentEventObjectValue = e.target.value;
+    };
+    const { container } = render(
+      <TextArea allowClear value="111" onChange={onChange} />,
+    );
+    fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
+    expect(argumentEventObjectType).toBe('click');
+    expect(argumentEventObjectValue).toBe('');
+    expect(container.querySelector('textarea')?.value).toBe('111');
+  });
+
+  it('should focus textarea after clear', () => {
+    const { container } = render(<TextArea allowClear defaultValue="111" />);
+    fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
+    expect(document.activeElement).toBe(container.querySelector('textarea'));
+  });
+
+  it('should not support allowClear when it is disabled', () => {
+    const { container } = render(
+      <TextArea allowClear defaultValue="111" disabled />,
+    );
+    expect(
+      container.querySelector('.rc-textarea-clear-icon-hidden'),
+    ).toBeTruthy();
+  });
+
+  it('should not support allowClear when it is readOnly', () => {
+    const { container } = render(
+      <TextArea allowClear defaultValue="111" readOnly />,
+    );
+    expect(
+      container.querySelector('.rc-textarea-clear-icon-hidden'),
+    ).toBeTruthy();
+  });
+});
+
+it('should show clear className', () => {
+  const { container } = render(<TextArea allowClear />);
+  expect(
+    container.querySelector('.rc-textarea-textarea-allow-clear'),
+  ).toBeTruthy();
+});
+
+it('should not textarea clear className', () => {
+  const { container } = render(<TextArea />);
+  expect(
+    container.querySelector('.rc-textarea-textarea-allow-clear'),
+  ).toBeFalsy();
+});
+
+it('support onClear', () => {
+  const onClear = jest.fn();
+  const { container } = render(
+    <TextArea onClear={onClear} defaultValue="test" allowClear />,
+  );
+  fireEvent.click(
+    container.querySelector<HTMLSpanElement>('.rc-textarea-clear-icon')!,
+  );
+  expect(onClear).toHaveBeenCalled();
+});
diff --git a/tests/TextArea.count.test.tsx b/tests/TextArea.count.test.tsx
new file mode 100644
index 0000000..2981cc9
--- /dev/null
+++ b/tests/TextArea.count.test.tsx
@@ -0,0 +1,152 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Input from '../src';
+
+const TextArea = Input.TextArea;
+
+const getSegments = (val: string) => [...new Intl.Segmenter().segment(val)];
+
+describe('TextArea.Count', () => {
+  it('basic emoji take length', () => {
+    const { container } = render(
+      <TextArea count={{ show: true }} value="👨‍👩‍👧‍👦" />,
+    );
+    expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
+      '11',
+    );
+  });
+
+  it('strategy', () => {
+    const { container } = render(
+      <TextArea
+        count={{ show: true, strategy: (val) => getSegments(val).length }}
+        value="👨‍👩‍👧‍👦"
+      />,
+    );
+    expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
+      '1',
+    );
+  });
+
+  it('exceed style', () => {
+    const { container } = render(
+      <TextArea count={{ show: true, max: 5 }} value="👨‍👩‍👧‍👦" />,
+    );
+    expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
+  });
+
+  it('show formatter', () => {
+    const { container } = render(
+      <TextArea
+        count={{
+          show: ({ value, count, maxLength }) =>
+            `${value}_${count}_${maxLength}`,
+        }}
+        value="👨‍👩‍👧‍👦"
+        maxLength={5}
+      />,
+    );
+    expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
+      '👨‍👩‍👧‍👦_11_5',
+    );
+  });
+
+  it('exceedFormatter', () => {
+    const onCompositionStart = jest.fn();
+    const onCompositionEnd = jest.fn();
+
+    const { container } = render(
+      <TextArea
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) =>
+            getSegments(val)
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join(''),
+        }}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+      />,
+    );
+
+    // Allow input
+    fireEvent.compositionStart(container.querySelector('textarea')!);
+    fireEvent.change(container.querySelector('textarea')!, {
+      target: {
+        value: '🔥🔥🔥🔥🔥',
+      },
+    });
+    expect(container.querySelector('textarea')?.value).toEqual('🔥🔥🔥🔥🔥');
+    expect(onCompositionStart).toHaveBeenCalled();
+
+    // Fallback
+    fireEvent.compositionEnd(container.querySelector('textarea')!);
+    expect(container.querySelector('textarea')?.value).toEqual('🔥');
+    expect(onCompositionEnd).toHaveBeenCalled();
+  });
+
+  it('exceedFormatter selection', () => {
+    const { container } = render(
+      <TextArea
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) => val.slice(0, max),
+        }}
+        defaultValue={'123'}
+      />,
+    );
+
+    const input = container.querySelector('textarea')!;
+    const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 2,
+        selectionEnd: 2,
+        value: '1a23',
+      },
+    });
+
+    expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
+  });
+
+  describe('cls', () => {
+    it('raw', () => {
+      const { container } = render(
+        <TextArea
+          count={{
+            max: 3,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
+    });
+
+    it('wrapper', () => {
+      const { container } = render(
+        <TextArea
+          count={{
+            max: 3,
+            show: true,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
+    });
+  });
+
+  it('native maxLength', () => {
+    const { container } = render(<TextArea maxLength={33} />);
+
+    expect(
+      container.querySelector('textarea')?.getAttribute('maxlength'),
+    ).toEqual('33');
+  });
+});
diff --git a/tests/TextArea.focus.test.tsx b/tests/TextArea.focus.test.tsx
new file mode 100644
index 0000000..867e2ad
--- /dev/null
+++ b/tests/TextArea.focus.test.tsx
@@ -0,0 +1,96 @@
+// @ts-nocheck
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Input from '../src';
+import type { TextAreaRef } from '../src';
+
+const TextArea = Input.TextArea;
+
+describe('focus and blur', () => {
+  let focused = false;
+  let blurred = false;
+  const mockFocus = jest.spyOn(HTMLElement.prototype, 'focus');
+  const mockBlur = jest.spyOn(HTMLElement.prototype, 'blur');
+
+  beforeAll(() => {
+    mockFocus.mockImplementation(() => {
+      focused = true;
+    });
+    mockBlur.mockImplementation(() => {
+      blurred = true;
+    });
+  });
+
+  afterEach(() => {
+    focused = false;
+    blurred = false;
+  });
+
+  it('focus() and onFocus', () => {
+    const handleFocus = jest.fn();
+    const { container } = render(<TextArea onFocus={handleFocus} />);
+    fireEvent.focus(container.firstChild);
+    expect(handleFocus).toHaveBeenCalled();
+  });
+
+  it('blur() and onBlur', async () => {
+    jest.useRealTimers();
+    const handleBlur = jest.fn();
+    const { container } = render(<TextArea onBlur={handleBlur} />);
+    fireEvent.focus(container.firstChild);
+    fireEvent.blur(container.firstChild);
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  it('Ref: focus() and onFocus', () => {
+    const onFocus = jest.fn();
+    const ref = React.createRef<TextAreaRef>();
+    const { container } = render(
+      <div>
+        <TextArea onFocus={onFocus} ref={ref} />
+      </div>,
+    );
+    ref.current.focus();
+    expect(focused).toBeTruthy();
+
+    fireEvent.focus(container.querySelector('textarea'));
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('Ref: blur() and onBlur', async () => {
+    jest.useRealTimers();
+    const onBlur = jest.fn();
+    const ref = React.createRef<TextAreaRef>();
+    const { container } = render(
+      <div>
+        <TextArea onBlur={onBlur} ref={ref} />
+      </div>,
+    );
+
+    ref.current.blur();
+    expect(blurred).toBeTruthy();
+
+    fireEvent.blur(container.querySelector('textarea'));
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('autoFocus', () => {
+    const handleFocus = jest.fn();
+    render(<TextArea autoFocus onFocus={handleFocus} />);
+    expect(focused).toBeTruthy();
+  });
+
+  it('check className when onFocus and onBlur', () => {
+    const { container } = render(<TextArea allowClear />);
+
+    fireEvent.focus(container.querySelector('textarea'));
+    expect(
+      document.querySelector('.rc-textarea-affix-wrapper-focused'),
+    ).toBeTruthy();
+
+    fireEvent.blur(container.querySelector('textarea'));
+    expect(
+      container.querySelector('.rc-textarea-affix-wrapper-focused'),
+    ).toBeFalsy();
+  });
+});
diff --git a/tests/TextArea.showCount.test.tsx b/tests/TextArea.showCount.test.tsx
new file mode 100644
index 0000000..63db382
--- /dev/null
+++ b/tests/TextArea.showCount.test.tsx
@@ -0,0 +1,79 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import Input from '../src';
+
+const TextArea = Input.TextArea;
+
+describe('should support showCount', () => {
+  it('maxLength', () => {
+    const { container } = render(
+      <TextArea maxLength={5} showCount value="12345" />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('12345');
+    expect(
+      container
+        .querySelector('.rc-textarea-show-count')
+        ?.getAttribute('data-count'),
+    ).toBe('5 / 5');
+    expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
+      '5 / 5',
+    );
+  });
+
+  it('control exceed maxLength', () => {
+    const { container } = render(
+      <TextArea maxLength={5} showCount value="12345678" />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('12345678');
+    expect(
+      container
+        .querySelector('.rc-textarea-show-count')
+        ?.getAttribute('data-count'),
+    ).toBe('8 / 5');
+    expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
+      '8 / 5',
+    );
+  });
+
+  it('should support object', () => {
+    const { container } = render(
+      <TextArea
+        maxLength={5}
+        showCount={{
+          formatter: ({ value, count, maxLength }) =>
+            `${value}, ${count}, ${maxLength}`,
+        }}
+        value="12345"
+      />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('12345');
+    expect(
+      container
+        .querySelector('.rc-textarea-show-count')
+        ?.getAttribute('data-count'),
+    ).toBe('12345, 5, 5');
+    expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
+      '12345, 5, 5',
+    );
+  });
+
+  it('className & style patch to outer', () => {
+    const { container } = render(
+      <TextArea className="bamboo" style={{ background: 'red' }} showCount />,
+    );
+
+    // Outer
+    expect(
+      container.querySelector('span')?.classList.contains('bamboo'),
+    ).toBeTruthy();
+    expect(container.querySelector('span')?.style.background).toEqual('red');
+
+    // Inner
+    expect(
+      container.querySelector('.rc-textarea')?.classList.contains('bamboo'),
+    ).toBeFalsy();
+    expect(
+      container.querySelector<HTMLDivElement>('.rc-textarea')?.style.background,
+    ).toBeFalsy();
+  });
+});
diff --git a/tests/TextArea.test.tsx b/tests/TextArea.test.tsx
new file mode 100644
index 0000000..51bf222
--- /dev/null
+++ b/tests/TextArea.test.tsx
@@ -0,0 +1,487 @@
+// @ts-nocheck
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Input from '../src';
+import type { TextAreaProps, TextAreaRef } from '../src';
+import calculateAutoSizeStyle, {
+  calculateNodeStyling,
+} from '../src/calculateNodeHeight';
+import { triggerResize, wait } from './utils';
+
+const TextArea = Input.TextArea;
+
+describe('TextArea', () => {
+  const originalGetComputedStyle = window.getComputedStyle;
+  beforeAll(() => {
+    Object.defineProperty(window, 'getComputedStyle', {
+      value: (node) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'box-sizing') {
+            return originalGetComputedStyle(node)[prop] || 'border-box';
+          }
+          return originalGetComputedStyle(node)[prop];
+        },
+      }),
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'getComputedStyle', {
+      value: originalGetComputedStyle,
+    });
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('paste text should change cursor position', async () => {
+    const { container } = render(
+      <TextArea autoSize={{ minRows: 2, maxRows: 6 }} />,
+    );
+    const textArea = container.querySelector('textarea') as HTMLTextAreaElement;
+    // 监听事件绑定和移除
+    const pasteData = 'pasted text\n'.repeat(10);
+    const clipboardData = {
+      getData: jest.fn().mockReturnValue(pasteData),
+    };
+
+    const pasteEvent = async () => {
+      fireEvent.focus(textArea);
+
+      fireEvent.paste(textArea, {
+        clipboardData,
+        types: ['text/plain'],
+        items: [],
+      });
+
+      fireEvent.change(textArea, { target: { value: pasteData } });
+      textArea.setSelectionRange(pasteData.length, pasteData.length);
+
+      await wait();
+      expect(textArea.selectionStart).toBe(pasteData.length);
+      expect(textArea.selectionEnd).toBe(pasteData.length);
+      fireEvent.change(textArea, { target: { value: '' } });
+      await wait();
+      expect(textArea.selectionStart).toBe(0);
+      expect(textArea.selectionEnd).toBe(0);
+    };
+
+    await pasteEvent();
+    await pasteEvent();
+  });
+
+  it('should work correctly on controlled mode', () => {
+    const Demo = () => {
+      const [value, setValue] = React.useState('111');
+      return (
+        <TextArea
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+        />
+      );
+    };
+    const { container } = render(<Demo />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('111');
+    fireEvent.change(textarea, {
+      target: {
+        value: '222',
+      },
+    });
+    expect(textarea.value).toBe('222');
+  });
+
+  it('should auto calculate height according to content length and autoSize property', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const onInternalAutoSize = jest.fn();
+
+    const renderDemo = (
+      value = '',
+      autoSize: TextAreaProps['autoSize'] = { minRows: 2, maxRows: 6 },
+    ) => (
+      <TextArea
+        value={value}
+        readOnly
+        autoSize={autoSize}
+        wrap="off"
+        // @ts-ignore
+        onInternalAutoSize={onInternalAutoSize}
+      />
+    );
+
+    const { container, rerender } = render(renderDemo());
+
+    await wait();
+    onInternalAutoSize.mockRestore();
+
+    rerender(renderDemo('1111\n2222\n3333'));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(1);
+
+    rerender(renderDemo('1111'));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(2);
+
+    rerender(renderDemo('1111', { minRows: 1, maxRows: 6 }));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(3);
+
+    rerender(renderDemo('1111', { minRows: 1, maxRows: 6 }));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(3);
+
+    rerender(renderDemo('1111', { minRows: 1, maxRows: 12 }));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(4);
+
+    rerender(renderDemo('1111', true));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(5);
+
+    rerender(renderDemo('1111', false));
+    await wait();
+    expect(onInternalAutoSize).toHaveBeenCalledTimes(5);
+
+    expect(container.querySelector('textarea')).not.toHaveStyle({
+      overflowY: 'hidden',
+    });
+
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
+  it('should support onPressEnter and onKeyDown', () => {
+    const fakeHandleKeyDown = jest.fn();
+    const fakeHandlePressEnter = jest.fn();
+    const { container } = render(
+      <TextArea
+        onKeyDown={fakeHandleKeyDown}
+        onPressEnter={fakeHandlePressEnter}
+      />,
+    );
+    const textarea = container.querySelector('textarea');
+    /** keyCode 65 is A */
+    fireEvent.keyDown(textarea, { keyCode: 65 });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
+
+    /** keyCode 13 is Enter */
+    fireEvent.keyDown(textarea, { keyCode: 13 });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should support disabled', () => {
+    const { container } = render(<TextArea disabled />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support maxLength', () => {
+    const { container } = render(<TextArea maxLength={10} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('calculateNodeStyling works correctly', () => {
+    const wrapper = document.createElement('textarea');
+    wrapper.id = 'test';
+    wrapper.wrap = 'wrap';
+    calculateNodeStyling(wrapper, true);
+    const value = calculateNodeStyling(wrapper, true);
+    expect(value).toEqual({
+      borderSize: 2,
+      boxSizing: 'border-box',
+      paddingSize: 4,
+      sizingStyle:
+        'letter-spacing:normal;line-height:normal;padding-top:2px;padding-bottom:2px;font-family:-webkit-small-control;font-weight:;font-size:;font-variant:;text-rendering:auto;text-transform:none;width:;text-indent:0;padding-left:2px;padding-right:2px;border-width:1px;box-sizing:border-box;word-break:;white-space:pre-wrap',
+    });
+  });
+
+  it('boxSizing === "border-box"', () => {
+    const wrapper = document.createElement('textarea');
+    wrapper.style.boxSizing = 'border-box';
+    const { height } = calculateAutoSizeStyle(wrapper);
+    expect(height).toBe(2);
+  });
+
+  it('boxSizing === "content-box"', () => {
+    const wrapper = document.createElement('textarea');
+    wrapper.style.boxSizing = 'content-box';
+    const { height } = calculateAutoSizeStyle(wrapper);
+    expect(height).toBe(-4);
+  });
+
+  it('minRows or maxRows is not null', () => {
+    const wrapper = document.createElement('textarea');
+    expect(calculateAutoSizeStyle(wrapper, false, 1, 1)).toEqual(
+      expect.objectContaining({
+        height: 2,
+        minHeight: 2,
+        overflowY: 'hidden',
+        resize: 'none',
+      }),
+    );
+    wrapper.style.boxSizing = 'content-box';
+    expect(calculateAutoSizeStyle(wrapper, false, 1, 1)).toEqual(
+      expect.objectContaining({
+        height: -4,
+        minHeight: -4,
+        overflowY: 'hidden',
+        resize: 'none',
+      }),
+    );
+  });
+
+  it('handleKeyDown', () => {
+    const onPressEnter = jest.fn();
+    const onKeyDown = jest.fn();
+    const { container } = render(
+      <TextArea
+        onPressEnter={onPressEnter}
+        onKeyDown={onKeyDown}
+        aria-label="textarea"
+      />,
+    );
+    fireEvent.keyDown(container.querySelector('textarea'), { keyCode: 13 });
+    expect(onPressEnter).toHaveBeenCalled();
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+
+  it('should trigger onResize', async () => {
+    const onResize = jest.fn();
+    const { container } = render(<TextArea onResize={onResize} autoSize />);
+    await wait();
+
+    triggerResize(container.querySelector('textarea'));
+    await wait();
+
+    expect(onResize).toHaveBeenCalledWith(
+      expect.objectContaining({
+        width: expect.any(Number),
+        height: expect.any(Number),
+      }),
+    );
+  });
+
+  it('scroll to bottom when autoSize', async () => {
+    const { container, unmount } = render(<TextArea autoSize />);
+    container.querySelector('textarea').focus();
+    expect(document.activeElement).toBe(container.querySelector('textarea'));
+
+    // https://github.com/ant-design/ant-design/issues/54444
+    // Other browsers may have cursor position issues when calling setSelectionRange, so we do not call it here.
+    // const setSelectionRangeFn = jest.spyOn(
+    //   container.querySelector('textarea'),
+    //   'setSelectionRange',
+    // );
+
+    fireEvent.change(container.querySelector('textarea'), {
+      target: { value: '\n1' },
+    });
+
+    await wait();
+
+    // expect(setSelectionRangeFn).toHaveBeenCalled();
+    expect(container.querySelector('textarea').scrollTop).toBe(
+      container.querySelector('textarea').scrollHeight,
+    );
+    unmount();
+  });
+
+  it('should support onPressEnter and onKeyDown', () => {
+    const fakeHandleKeyDown = jest.fn();
+    const fakeHandlePressEnter = jest.fn();
+    const { container } = render(
+      <TextArea
+        onKeyDown={fakeHandleKeyDown}
+        onPressEnter={fakeHandlePressEnter}
+      />,
+    );
+    /** KeyCode 65 is A */
+    fireEvent.keyDown(container.querySelector('textarea')!, { key: 'A' });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
+
+    /** KeyCode 13 is Enter */
+    fireEvent.keyDown(container.querySelector('textarea')!, { key: 'Enter' });
+    expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
+    expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
+  });
+
+  it('classNames and styles should work', () => {
+    const { container } = render(
+      <>
+        <TextArea
+          value="123"
+          showCount
+          suffix="suffix"
+          allowClear
+          className="custom-class"
+          style={{ background: 'red' }}
+          classNames={{
+            textarea: 'custom-textarea',
+            suffix: 'custom-suffix',
+            clear: 'custom-clear',
+            count: 'custom-count',
+          }}
+          styles={{
+            textarea: {
+              color: 'red',
+            },
+            suffix: {
+              color: 'yellow',
+            },
+            clear: {
+              color: 'orange',
+            },
+            count: {
+              color: 'blue',
+            },
+          }}
+        />
+        <TextArea
+          showCount
+          className="custom-class"
+          style={{ background: 'red' }}
+          classNames={{
+            textarea: 'custom-textarea',
+            count: 'custom-count',
+          }}
+          styles={{
+            textarea: {
+              color: 'red',
+            },
+            count: {
+              color: 'blue',
+            },
+          }}
+        />
+      </>,
+    );
+    expect(container.querySelector('.rc-textarea-clear-icon')).toHaveClass(
+      'custom-clear',
+    );
+    expect(container.querySelector('.rc-textarea-clear-icon')).toHaveStyle({
+      color: 'orange',
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should be resized with textarea', async () => {
+    const onResize = jest.fn();
+    const { container } = render(
+      <TextArea onResize={onResize} showCount style={{ height: 200 }} />,
+    );
+    await wait();
+    expect(
+      (container.querySelector('.rc-textarea-affix-wrapper') as HTMLDivElement)
+        .style.height,
+    ).toBe('200px');
+
+    triggerResize(container.querySelector('textarea'), { height: 1000 });
+    await wait();
+    expect(onResize).toHaveBeenCalledTimes(1);
+    expect(
+      (container.querySelector('.rc-textarea-affix-wrapper') as HTMLDivElement)
+        .style.height,
+    ).toBe('auto');
+  });
+
+  it('pass style height should work', async () => {
+    const onResize = jest.fn();
+
+    const { container } = render(
+      <TextArea onResize={onResize} style={{ height: 93 }} />,
+    );
+
+    triggerResize(container.querySelector('textarea'));
+    await wait();
+
+    expect(onResize).toHaveBeenCalled();
+
+    expect(container.querySelector('textarea')).toHaveStyle({
+      height: '903px',
+    });
+  });
+
+  it('support bigint type', () => {
+    const { container } = render(<TextArea value={BigInt('903')} autoSize />);
+    expect(container.querySelector('textarea').value).toBe('903');
+  });
+
+  describe('ref.nativeElement', () => {
+    it('textarea', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(
+        <div>
+          <TextArea ref={ref} />
+        </div>,
+      );
+
+      expect(ref.current.nativeElement).toEqual(
+        container.querySelector('textarea'),
+      );
+    });
+
+    it('holder', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(
+        <div>
+          <TextArea ref={ref} allowClear />
+        </div>,
+      );
+
+      expect(ref.current.nativeElement).toEqual(
+        container.querySelector('.rc-textarea-affix-wrapper'),
+      );
+    });
+  });
+});
+
+describe('TextArea IME behavior', () => {
+  it('should ignore Enter during composition', () => {
+    const onPressEnter = jest.fn();
+    const { container } = render(<TextArea onPressEnter={onPressEnter} />);
+    const textarea = container.querySelector('textarea')!;
+
+    fireEvent.compositionStart(textarea);
+
+    fireEvent.keyDown(textarea, {
+      key: 'Enter',
+      keyCode: 229,
+      isComposing: true,
+      nativeEvent: { isComposing: true },
+    });
+
+    fireEvent.compositionUpdate(textarea, { data: '开始' });
+
+    expect(onPressEnter).not.toHaveBeenCalled();
+
+    fireEvent.compositionEnd(textarea);
+    fireEvent.keyDown(textarea, {
+      key: 'Enter',
+      nativeEvent: { isComposing: false },
+    });
+    expect(onPressEnter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should trigger Enter for non-composition (normal) input', () => {
+    const onPressEnter = jest.fn();
+    const { container } = render(<TextArea onPressEnter={onPressEnter} />);
+    const textarea = container.querySelector('textarea')!;
+
+    fireEvent.change(textarea, { target: { value: 'test' } });
+
+    fireEvent.keyDown(textarea, {
+      key: 'Enter',
+    });
+    expect(onPressEnter).toHaveBeenCalledTimes(1);
+    expect(textarea.value).toBe('test');
+  });
+});
diff --git a/tests/__snapshots__/TextArea.allowClear.test.tsx.snap b/tests/__snapshots__/TextArea.allowClear.test.tsx.snap
new file mode 100644
index 0000000..a9783b9
--- /dev/null
+++ b/tests/__snapshots__/TextArea.allowClear.test.tsx.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 1`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 2`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 3`] = `
+<span
+  class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
+>
+  <textarea
+    class="rc-textarea"
+  />
+  <span
+    class="rc-textarea-suffix"
+  >
+    <button
+      class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
+      tabindex="-1"
+      type="button"
+    >
+      ✖
+    </button>
+  </span>
+</span>
+`;
diff --git a/tests/__snapshots__/TextArea.test.tsx.snap b/tests/__snapshots__/TextArea.test.tsx.snap
new file mode 100644
index 0000000..7a5a108
--- /dev/null
+++ b/tests/__snapshots__/TextArea.test.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextArea classNames and styles should work 1`] = `
+<div>
+  <span
+    class="rc-textarea-affix-wrapper rc-textarea-affix-wrapper-input-with-clear-btn rc-textarea-show-count rc-textarea-textarea-allow-clear custom-class"
+    data-count="3"
+    style="background: red;"
+  >
+    <textarea
+      class="rc-textarea custom-textarea"
+      style="color: red;"
+    >
+      123
+    </textarea>
+    <span
+      class="rc-textarea-suffix custom-suffix"
+      style="color: yellow;"
+    >
+      <button
+        class="rc-textarea-clear-icon rc-textarea-clear-icon-has-suffix custom-clear"
+        style="color: orange;"
+        tabindex="-1"
+        type="button"
+      >
+        ✖
+      </button>
+      suffix
+      <span
+        class="rc-textarea-data-count custom-count"
+        style="color: blue;"
+      >
+        3
+      </span>
+    </span>
+  </span>
+  <span
+    class="rc-textarea-affix-wrapper rc-textarea-show-count custom-class"
+    data-count="0"
+    style="background: red;"
+  >
+    <textarea
+      class="rc-textarea custom-textarea"
+      style="color: red;"
+    />
+    <span
+      class="rc-textarea-suffix"
+    >
+      <span
+        class="rc-textarea-data-count custom-count"
+        style="color: blue;"
+      >
+        0
+      </span>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`TextArea should support disabled 1`] = `
+<textarea
+  class="rc-textarea rc-textarea-disabled"
+  disabled=""
+/>
+`;
+
+exports[`TextArea should support maxLength 1`] = `
+<textarea
+  class="rc-textarea"
+  maxlength="10"
+/>
+`;
diff --git a/tests/setupFilesAfterEnv.js b/tests/setupFilesAfterEnv.js
index 7b0828b..86293d4 100644
--- a/tests/setupFilesAfterEnv.js
+++ b/tests/setupFilesAfterEnv.js
@@ -1 +1,10 @@
 import '@testing-library/jest-dom';
+
+window.requestAnimationFrame = window.setTimeout;
+window.cancelAnimationFrame = window.clearTimeout;
+
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
diff --git a/tests/utils.ts b/tests/utils.ts
new file mode 100644
index 0000000..817a1f7
--- /dev/null
+++ b/tests/utils.ts
@@ -0,0 +1,32 @@
+// @ts-nocheck
+import { act } from '@testing-library/react';
+import {
+  _rs as onEsResize,
+  _rs as onLibResize,
+} from '@rc-component/resize-observer/lib/utils/observerUtil';
+
+export function triggerResize(
+  target,
+  size?: { width?: number; height?: number },
+) {
+  const { width = 510, height = 903 } = size || {};
+  const originGetBoundingClientRect = target.getBoundingClientRect;
+
+  target.getBoundingClientRect = () => ({ width, height });
+  // @ts-ignore
+  onLibResize([{ target }]);
+  // @ts-ignore
+  onEsResize([{ target }]);
+
+  target.style.height = `${height}px`;
+  target.getBoundingClientRect = originGetBoundingClientRect;
+}
+
+export async function wait() {
+  for (let i = 0; i < 100; i += 1) {
+    await act(async () => {
+      jest.runAllTimers();
+      await Promise.resolve();
+    });
+  }
+}

From 7a9590351c720516847b48f28b9cbc838f9b3c4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Wed, 18 Mar 2026 10:28:00 +0800
Subject: [PATCH 02/10] refactor(input): extract shared count display state for
 input and textarea

---
 src/Input.tsx                 | 66 +++++++++----------------------
 src/TextArea.tsx              | 73 ++++++++---------------------------
 src/hooks/useCount.ts         |  2 +-
 src/hooks/useCountDisplay.ts  | 43 +++++++++++++++++++++
 src/hooks/useCountExceed.ts   | 55 ++++++++++++++++++++++++++
 src/hooks/useMergedValue.ts   | 18 +++++++++
 tests/TextArea.count.test.tsx | 18 +++++++++
 tests/count.test.tsx          | 18 +++++++++
 8 files changed, 187 insertions(+), 106 deletions(-)
 create mode 100644 src/hooks/useCountDisplay.ts
 create mode 100644 src/hooks/useCountExceed.ts
 create mode 100644 src/hooks/useMergedValue.ts

diff --git a/src/Input.tsx b/src/Input.tsx
index 15cd724..6734921 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import omit from '@rc-component/util/lib/omit';
 import React, {
   forwardRef,
@@ -11,6 +10,9 @@ import React, {
 import type { HolderRef } from './BaseInput';
 import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
+import useCountDisplay from './hooks/useCountDisplay';
+import useCountExceed from './hooks/useCountExceed';
+import useMergedValue from './hooks/useMergedValue';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import { resolveOnChange } from './utils/commonUtils';
 import {
@@ -58,21 +60,21 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   // ====================== Value =======================
-  const [value, setValue] = useControlledState(props.defaultValue, props.value);
-  const formatValue =
-    value === undefined || value === null ? '' : String(value);
-
-  // =================== Select Range ===================
-  const [selection, setSelection] = useState<
-    [start: number, end: number] | null
-  >(null);
+  const { setValue, formatValue } = useMergedValue(
+    props.defaultValue,
+    props.value,
+  );
 
-  // ====================== Count =======================
   const countConfig = useCount(count, showCount);
-  const mergedMax = countConfig.max || maxLength;
-  const valueLength = countConfig.strategy(formatValue);
-
-  const isOutOfRange = !!mergedMax && valueLength > mergedMax;
+  const { mergedMax, isOutOfRange, dataCount } = useCountDisplay({
+    countConfig,
+    value: formatValue,
+    maxLength,
+  });
+  const getExceedValue = useCountExceed({
+    countConfig,
+    getTarget: () => inputRef.current,
+  });
 
   // ======================= Ref ========================
   useImperativeHandle(ref, () => ({
@@ -108,25 +110,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     currentValue: string,
     info: ChangeEventInfo,
   ) => {
-    let cutValue = currentValue;
-
-    if (
-      !compositionRef.current &&
-      countConfig.exceedFormatter &&
-      countConfig.max &&
-      countConfig.strategy(currentValue) > countConfig.max
-    ) {
-      cutValue = countConfig.exceedFormatter(currentValue, {
-        max: countConfig.max,
-      });
+    const cutValue = getExceedValue(currentValue, compositionRef.current);
 
-      if (currentValue !== cutValue) {
-        setSelection([
-          inputRef.current?.selectionStart || 0,
-          inputRef.current?.selectionEnd || 0,
-        ]);
-      }
-    } else if (info.source === 'compositionEnd') {
+    if (info.source === 'compositionEnd' && currentValue === cutValue) {
       // Avoid triggering twice
       // https://github.com/ant-design/ant-design/issues/46587
       return;
@@ -138,12 +124,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
-  useEffect(() => {
-    if (selection) {
-      inputRef.current?.setSelectionRange(...selection);
-    }
-  }, [selection]);
-
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     triggerChange(e, e.target.value, {
       source: 'change',
@@ -260,17 +240,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const getSuffix = () => {
     // Max length value
-    const hasMaxLength = Number(mergedMax) > 0;
-
     if (suffix || countConfig.show) {
-      const dataCount = countConfig.showFormatter
-        ? countConfig.showFormatter({
-            value: formatValue,
-            count: valueLength,
-            maxLength: mergedMax,
-          })
-        : `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`;
-
       return (
         <>
           {countConfig.show && (
diff --git a/src/TextArea.tsx b/src/TextArea.tsx
index 9a0e0b0..a076f35 100644
--- a/src/TextArea.tsx
+++ b/src/TextArea.tsx
@@ -1,10 +1,11 @@
-import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import type { HolderRef } from './BaseInput';
 import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
+import useCountDisplay from './hooks/useCountDisplay';
+import useCountExceed from './hooks/useCountExceed';
+import useMergedValue from './hooks/useMergedValue';
 import type {
   ResizableTextAreaRef,
   TextAreaProps,
@@ -45,10 +46,6 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     },
     ref,
   ) => {
-    const [value, setValue] = useControlledState(defaultValue, customValue);
-    const formatValue =
-      value === undefined || value === null ? '' : String(value);
-
     const [focused, setFocused] = React.useState<boolean>(false);
 
     const compositionRef = React.useRef(false);
@@ -62,6 +59,18 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const resizableTextAreaRef = useRef<ResizableTextAreaRef>(null);
     const getTextArea = () => resizableTextAreaRef.current?.textArea!;
 
+    const { setValue, formatValue } = useMergedValue(defaultValue, customValue);
+    const countConfig = useCount(count, showCount);
+    const { mergedMax, isOutOfRange, dataCount } = useCountDisplay({
+      countConfig,
+      value: formatValue,
+      maxLength,
+    });
+    const getExceedValue = useCountExceed({
+      countConfig,
+      getTarget: () => resizableTextAreaRef.current?.textArea || null,
+    });
+
     const focus = () => {
       getTextArea().focus();
     };
@@ -79,28 +88,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
       setFocused((prev) => !disabled && prev);
     }, [disabled]);
 
-    // =========================== Select Range ===========================
-    const [selection, setSelection] = React.useState<
-      [start: number, end: number] | null
-    >(null);
-
-    React.useEffect(() => {
-      if (selection) {
-        getTextArea().setSelectionRange(...selection);
-      }
-    }, [selection]);
-
     // ============================== Count ===============================
-    const countConfig = useCount(count, showCount);
-    const mergedMax = countConfig.max ?? maxLength;
-
-    // Max length value
-    const hasMaxLength = Number(mergedMax) > 0;
-
-    const valueLength = countConfig.strategy(formatValue);
-
-    const isOutOfRange = !!mergedMax && valueLength > mergedMax;
-
     // ============================== Change ==============================
     const triggerChange = (
       e:
@@ -108,25 +96,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         | React.CompositionEvent<HTMLTextAreaElement>,
       currentValue: string,
     ) => {
-      let cutValue = currentValue;
-
-      if (
-        !compositionRef.current &&
-        countConfig.exceedFormatter &&
-        countConfig.max &&
-        countConfig.strategy(currentValue) > countConfig.max
-      ) {
-        cutValue = countConfig.exceedFormatter(currentValue, {
-          max: countConfig.max,
-        });
-
-        if (currentValue !== cutValue) {
-          setSelection([
-            getTextArea().selectionStart || 0,
-            getTextArea().selectionEnd || 0,
-          ]);
-        }
-      }
+      const cutValue = getExceedValue(currentValue, compositionRef.current);
       setValue(cutValue);
 
       resolveOnChange(e.currentTarget, e, onChange, cutValue);
@@ -177,18 +147,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     };
 
     let suffixNode = suffix;
-    let dataCount: ReactNode;
     if (countConfig.show) {
-      if (countConfig.showFormatter) {
-        dataCount = countConfig.showFormatter({
-          value: formatValue,
-          count: valueLength,
-          maxLength: mergedMax,
-        });
-      } else {
-        dataCount = `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`;
-      }
-
       suffixNode = (
         <>
           {suffixNode}
diff --git a/src/hooks/useCount.ts b/src/hooks/useCount.ts
index feaa53e..47c2b33 100644
--- a/src/hooks/useCount.ts
+++ b/src/hooks/useCount.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { InputProps } from '..';
 import type { CountConfig, ShowCountFormatter } from '../interface';
 
-type ForcedCountConfig = Omit<CountConfig, 'show'> &
+export type ForcedCountConfig = Omit<CountConfig, 'show'> &
   Pick<Required<CountConfig>, 'strategy'> & {
     show: boolean;
     showFormatter?: ShowCountFormatter;
diff --git a/src/hooks/useCountDisplay.ts b/src/hooks/useCountDisplay.ts
new file mode 100644
index 0000000..16bb3ca
--- /dev/null
+++ b/src/hooks/useCountDisplay.ts
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { ReactNode } from 'react';
+import type { ForcedCountConfig } from './useCount';
+
+interface UseCountDisplayProps {
+  countConfig: ForcedCountConfig;
+  value: string;
+  maxLength?: number;
+}
+
+interface CountDisplayInfo {
+  mergedMax?: number;
+  isOutOfRange: boolean;
+  dataCount?: ReactNode;
+}
+
+export default function useCountDisplay({
+  countConfig,
+  value,
+  maxLength,
+}: UseCountDisplayProps): CountDisplayInfo {
+  return React.useMemo(() => {
+    const mergedMax = countConfig.max ?? maxLength;
+    const valueLength = countConfig.strategy(value);
+    const isOutOfRange = !!mergedMax && valueLength > mergedMax;
+    const hasMaxLength = Number(mergedMax) > 0;
+    const dataCount = countConfig.show
+      ? countConfig.showFormatter
+        ? countConfig.showFormatter({
+            value,
+            count: valueLength,
+            maxLength: mergedMax,
+          })
+        : `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`
+      : undefined;
+
+    return {
+      mergedMax,
+      isOutOfRange,
+      dataCount,
+    };
+  }, [countConfig, maxLength, value]);
+}
diff --git a/src/hooks/useCountExceed.ts b/src/hooks/useCountExceed.ts
new file mode 100644
index 0000000..6dea9a9
--- /dev/null
+++ b/src/hooks/useCountExceed.ts
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { CountConfig } from '../interface';
+import type { inCountRange } from './useCount';
+
+type ForcedCountConfig = Parameters<typeof inCountRange>[1];
+
+interface UseCountExceedProps<
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+> {
+  countConfig: ForcedCountConfig;
+  getTarget: () => Element | null;
+}
+
+export default function useCountExceed<
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+>({ countConfig, getTarget }: UseCountExceedProps<Element>) {
+  const [selection, setSelection] = React.useState<
+    [start: number, end: number] | null
+  >(null);
+
+  React.useEffect(() => {
+    if (selection) {
+      getTarget()?.setSelectionRange(...selection);
+    }
+  }, [getTarget, selection]);
+
+  const getExceedValue = React.useCallback(
+    (currentValue: string, isComposing: boolean) => {
+      let nextValue = currentValue;
+
+      if (
+        !isComposing &&
+        countConfig.exceedFormatter &&
+        countConfig.max &&
+        countConfig.strategy(currentValue) > countConfig.max
+      ) {
+        nextValue = countConfig.exceedFormatter(currentValue, {
+          max: countConfig.max,
+        });
+
+        if (currentValue !== nextValue) {
+          setSelection([
+            getTarget()?.selectionStart || 0,
+            getTarget()?.selectionEnd || 0,
+          ]);
+        }
+      }
+
+      return nextValue;
+    },
+    [countConfig, getTarget],
+  );
+
+  return getExceedValue;
+}
diff --git a/src/hooks/useMergedValue.ts b/src/hooks/useMergedValue.ts
new file mode 100644
index 0000000..326fe13
--- /dev/null
+++ b/src/hooks/useMergedValue.ts
@@ -0,0 +1,18 @@
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
+
+type MergedValue = string | number | readonly string[] | bigint | undefined;
+
+export default function useMergedValue<ValueType extends MergedValue>(
+  defaultValue?: ValueType,
+  controlledValue?: ValueType,
+) {
+  const [value, setValue] = useControlledState(defaultValue, controlledValue);
+  const formatValue =
+    value === undefined || value === null ? '' : String(value);
+
+  return {
+    value,
+    setValue,
+    formatValue,
+  };
+}
diff --git a/tests/TextArea.count.test.tsx b/tests/TextArea.count.test.tsx
index 2981cc9..1a4f915 100644
--- a/tests/TextArea.count.test.tsx
+++ b/tests/TextArea.count.test.tsx
@@ -113,6 +113,24 @@ describe('TextArea.Count', () => {
     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
   });
 
+  it('count.max should take priority over maxLength', () => {
+    const { container } = render(
+      <TextArea
+        maxLength={20}
+        count={{
+          show: true,
+          max: 5,
+        }}
+        value="123456"
+      />,
+    );
+
+    expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
+      '6 / 5',
+    );
+    expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index ccee16e..9c938b7 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -148,6 +148,24 @@ describe('Input.Count', () => {
     expect(input?.value).toEqual('你好世');
   });
 
+  it('count.max should take priority over maxLength', () => {
+    const { container } = render(
+      <Input
+        maxLength={20}
+        count={{
+          show: true,
+          max: 5,
+        }}
+        value="123456"
+      />,
+    );
+
+    expect(
+      container.querySelector('.rc-input-show-count-suffix')?.textContent,
+    ).toEqual('6 / 5');
+    expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(

From 8e6cc71347985a41e07d605a5aed4203c6841ac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Wed, 18 Mar 2026 10:41:02 +0800
Subject: [PATCH 03/10] fix: lint

---
 src/Input.tsx               |  2 +-
 src/TextArea.tsx            | 13 ++++++++-----
 src/hooks/useCountExceed.ts |  1 -
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 6734921..b8ef866 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -66,7 +66,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   );
 
   const countConfig = useCount(count, showCount);
-  const { mergedMax, isOutOfRange, dataCount } = useCountDisplay({
+  const { isOutOfRange, dataCount } = useCountDisplay({
     countConfig,
     value: formatValue,
     maxLength,
diff --git a/src/TextArea.tsx b/src/TextArea.tsx
index a076f35..8529814 100644
--- a/src/TextArea.tsx
+++ b/src/TextArea.tsx
@@ -57,11 +57,11 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     // =============================== Ref ================================
     const holderRef = useRef<HolderRef>(null);
     const resizableTextAreaRef = useRef<ResizableTextAreaRef>(null);
-    const getTextArea = () => resizableTextAreaRef.current?.textArea!;
+    const getTextArea = () => resizableTextAreaRef.current?.textArea || null;
 
     const { setValue, formatValue } = useMergedValue(defaultValue, customValue);
     const countConfig = useCount(count, showCount);
-    const { mergedMax, isOutOfRange, dataCount } = useCountDisplay({
+    const { isOutOfRange, dataCount } = useCountDisplay({
       countConfig,
       value: formatValue,
       maxLength,
@@ -72,14 +72,14 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     });
 
     const focus = () => {
-      getTextArea().focus();
+      getTextArea()?.focus();
     };
 
     useImperativeHandle(ref, () => ({
       resizableTextArea: resizableTextAreaRef.current!,
       focus,
       blur: () => {
-        getTextArea().blur();
+        getTextArea()?.blur();
       },
       nativeElement: holderRef.current?.nativeElement || getTextArea(),
     }));
@@ -143,7 +143,10 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
-      resolveOnChange(getTextArea(), e, onChange);
+      const textarea = getTextArea();
+      if (textarea) {
+        resolveOnChange(textarea, e, onChange);
+      }
     };
 
     let suffixNode = suffix;
diff --git a/src/hooks/useCountExceed.ts b/src/hooks/useCountExceed.ts
index 6dea9a9..3c8b994 100644
--- a/src/hooks/useCountExceed.ts
+++ b/src/hooks/useCountExceed.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { CountConfig } from '../interface';
 import type { inCountRange } from './useCount';
 
 type ForcedCountConfig = Parameters<typeof inCountRange>[1];

From 535e12a732ac4f5d89f20b2a52341ccb9c7f1eb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Wed, 18 Mar 2026 10:54:48 +0800
Subject: [PATCH 04/10] fix: test case

---
 tests/TextArea.allowClear.test.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/tests/TextArea.allowClear.test.tsx b/tests/TextArea.allowClear.test.tsx
index 1655430..7b38968 100644
--- a/tests/TextArea.allowClear.test.tsx
+++ b/tests/TextArea.allowClear.test.tsx
@@ -11,11 +11,12 @@ describe('should support allowClear', () => {
     fireEvent.change(container.querySelector('textarea')!, {
       target: { value: '111' },
     });
+    const clearIcon = container.querySelector('.rc-textarea-clear-icon');
+
     expect(container.querySelector('textarea')?.value).toEqual('111');
-    expect(
-      container.querySelector('.rc-textarea-clear-icon-hidhen'),
-    ).toBeFalsy();
-    fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
+    expect(clearIcon).toBeTruthy();
+    expect(clearIcon).not.toHaveClass('rc-textarea-clear-icon-hidden');
+    fireEvent.click(clearIcon!);
     expect(
       container.querySelector('.rc-textarea-clear-icon-hidden'),
     ).toBeTruthy();

From 7a885db4045e0c01585c226ba53448ea1456ef2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Wed, 18 Mar 2026 11:19:40 +0800
Subject: [PATCH 05/10] fix(input): avoid restoring stale selection after
 rerender

---
 src/hooks/useCountExceed.ts | 16 +++++++++++-----
 tests/count.test.tsx        | 29 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useCountExceed.ts b/src/hooks/useCountExceed.ts
index 3c8b994..7de71c7 100644
--- a/src/hooks/useCountExceed.ts
+++ b/src/hooks/useCountExceed.ts
@@ -16,12 +16,18 @@ export default function useCountExceed<
   const [selection, setSelection] = React.useState<
     [start: number, end: number] | null
   >(null);
+  const getTargetRef = React.useRef(getTarget);
+
+  React.useEffect(() => {
+    getTargetRef.current = getTarget;
+  }, [getTarget]);
 
   React.useEffect(() => {
     if (selection) {
-      getTarget()?.setSelectionRange(...selection);
+      getTargetRef.current()?.setSelectionRange(...selection);
+      setSelection(null);
     }
-  }, [getTarget, selection]);
+  }, [selection]);
 
   const getExceedValue = React.useCallback(
     (currentValue: string, isComposing: boolean) => {
@@ -39,15 +45,15 @@ export default function useCountExceed<
 
         if (currentValue !== nextValue) {
           setSelection([
-            getTarget()?.selectionStart || 0,
-            getTarget()?.selectionEnd || 0,
+            getTargetRef.current()?.selectionStart || 0,
+            getTargetRef.current()?.selectionEnd || 0,
           ]);
         }
       }
 
       return nextValue;
     },
-    [countConfig, getTarget],
+    [countConfig],
   );
 
   return getExceedValue;
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 9c938b7..a183790 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -109,6 +109,35 @@ describe('Input.Count', () => {
     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
   });
 
+  it('should not restore selection again on unrelated rerender', () => {
+    const count = {
+      show: true,
+      max: 3,
+      exceedFormatter: (val: string, { max }: { max: number }) =>
+        val.slice(0, max),
+    };
+    const { container, rerender } = render(
+      <Input count={count} defaultValue="123" />,
+    );
+
+    const input = container.querySelector('input')!;
+    const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 2,
+        selectionEnd: 2,
+        value: '1a23',
+      },
+    });
+
+    expect(setSelectionRange).toHaveBeenCalledTimes(1);
+
+    rerender(<Input count={count} defaultValue="123" className="rerender" />);
+
+    expect(setSelectionRange).toHaveBeenCalledTimes(1);
+  });
+
   it('input using the input method should trigger onChange once', () => {
     const onChange = jest.fn();
     const { container } = render(<Input onChange={onChange} />);

From 27a4d3f8cb8719c67d30b9ab9e2fdeb9d97cf2f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Fri, 20 Mar 2026 23:05:57 +0800
Subject: [PATCH 06/10] refactor(input): export textarea separately from
 rc-input

---
 src/index.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index c8db5c3..55bdf24 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,9 +2,6 @@ import BaseInput from './BaseInput';
 import Input from './Input';
 import TextArea from './TextArea';
 
-export { BaseInput };
-export { default as ResizableTextArea } from './ResizableTextArea';
-
 export type {
   AutoSizeType,
   InputProps,
@@ -14,14 +11,8 @@ export type {
   TextAreaRef,
 } from './interface';
 
-type CompoundedInput = typeof Input & {
-  TextArea: typeof TextArea;
-};
-
-const TypedInput = Input as CompoundedInput;
-
-TypedInput.TextArea = TextArea;
+export { default as ResizableTextArea } from './ResizableTextArea';
 
-export { TextArea };
+export { BaseInput, TextArea };
 
-export default TypedInput;
+export default Input;

From 2152659ecca82bf4b0be213beb50229db824079e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Fri, 20 Mar 2026 23:49:15 +0800
Subject: [PATCH 07/10] fix: test import

---
 tests/TextArea.allowClear.test.tsx | 4 +---
 tests/TextArea.count.test.tsx      | 4 +---
 tests/TextArea.focus.test.tsx      | 4 +---
 tests/TextArea.showCount.test.tsx  | 4 +---
 tests/TextArea.test.tsx            | 4 +---
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/tests/TextArea.allowClear.test.tsx b/tests/TextArea.allowClear.test.tsx
index 7b38968..ad0382f 100644
--- a/tests/TextArea.allowClear.test.tsx
+++ b/tests/TextArea.allowClear.test.tsx
@@ -1,9 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
 import React from 'react';
-import Input from '../src';
-
-const TextArea = Input.TextArea;
+import { TextArea } from '../src';
 
 describe('should support allowClear', () => {
   it('should change type when click', () => {
diff --git a/tests/TextArea.count.test.tsx b/tests/TextArea.count.test.tsx
index 1a4f915..f58def5 100644
--- a/tests/TextArea.count.test.tsx
+++ b/tests/TextArea.count.test.tsx
@@ -1,8 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import Input from '../src';
-
-const TextArea = Input.TextArea;
+import { TextArea } from '../src';
 
 const getSegments = (val: string) => [...new Intl.Segmenter().segment(val)];
 
diff --git a/tests/TextArea.focus.test.tsx b/tests/TextArea.focus.test.tsx
index 867e2ad..2836ce5 100644
--- a/tests/TextArea.focus.test.tsx
+++ b/tests/TextArea.focus.test.tsx
@@ -1,11 +1,9 @@
 // @ts-nocheck
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import Input from '../src';
+import { TextArea } from '../src';
 import type { TextAreaRef } from '../src';
 
-const TextArea = Input.TextArea;
-
 describe('focus and blur', () => {
   let focused = false;
   let blurred = false;
diff --git a/tests/TextArea.showCount.test.tsx b/tests/TextArea.showCount.test.tsx
index 63db382..eeb65ad 100644
--- a/tests/TextArea.showCount.test.tsx
+++ b/tests/TextArea.showCount.test.tsx
@@ -1,8 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import Input from '../src';
-
-const TextArea = Input.TextArea;
+import { TextArea } from '../src';
 
 describe('should support showCount', () => {
   it('maxLength', () => {
diff --git a/tests/TextArea.test.tsx b/tests/TextArea.test.tsx
index 51bf222..2ee2ec9 100644
--- a/tests/TextArea.test.tsx
+++ b/tests/TextArea.test.tsx
@@ -1,15 +1,13 @@
 // @ts-nocheck
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import Input from '../src';
+import { TextArea } from '../src';
 import type { TextAreaProps, TextAreaRef } from '../src';
 import calculateAutoSizeStyle, {
   calculateNodeStyling,
 } from '../src/calculateNodeHeight';
 import { triggerResize, wait } from './utils';
 
-const TextArea = Input.TextArea;
-
 describe('TextArea', () => {
   const originalGetComputedStyle = window.getComputedStyle;
   beforeAll(() => {

From bdd5ef954b5655dab7f9d74ca3c17553ff1a0591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?= <yanbing.gao@aliyun.com>
Date: Fri, 20 Mar 2026 23:56:18 +0800
Subject: [PATCH 08/10] fix: import

---
 docs/examples/textarea-allow-clear.tsx | 4 +---
 docs/examples/textarea-auto-size.tsx   | 4 +---
 docs/examples/textarea-basic.tsx       | 4 +---
 docs/examples/textarea-show-count.tsx  | 4 +---
 4 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/docs/examples/textarea-allow-clear.tsx b/docs/examples/textarea-allow-clear.tsx
index f416f8c..d182a76 100644
--- a/docs/examples/textarea-allow-clear.tsx
+++ b/docs/examples/textarea-allow-clear.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable no-console */
-import Input from '@rc-component/input';
+import { TextArea } from '@rc-component/input';
 import React, { useState, type ChangeEvent } from 'react';
 
-const TextArea = Input.TextArea;
-
 export default function App() {
   const [value, setValue] = useState('hello\nworld');
 
diff --git a/docs/examples/textarea-auto-size.tsx b/docs/examples/textarea-auto-size.tsx
index 2195306..7c8de57 100644
--- a/docs/examples/textarea-auto-size.tsx
+++ b/docs/examples/textarea-auto-size.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable no-console */
-import Input, { type TextAreaProps } from '@rc-component/input';
+import { TextArea, type TextAreaProps } from '@rc-component/input';
 import React, { useState, type ChangeEvent } from 'react';
 
-const TextArea = Input.TextArea;
-
 export default function App() {
   const [value, setValue] = useState('hello\nworld');
 
diff --git a/docs/examples/textarea-basic.tsx b/docs/examples/textarea-basic.tsx
index 567d47d..ee7ef41 100644
--- a/docs/examples/textarea-basic.tsx
+++ b/docs/examples/textarea-basic.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable no-console */
-import Input, { type TextAreaProps } from '@rc-component/input';
+import { TextArea, type TextAreaProps } from '@rc-component/input';
 import React, { useState, type ChangeEvent, type KeyboardEvent } from 'react';
 
-const TextArea = Input.TextArea;
-
 export default function App() {
   const [value, setValue] = useState('');
 
diff --git a/docs/examples/textarea-show-count.tsx b/docs/examples/textarea-show-count.tsx
index c030f9f..0326445 100644
--- a/docs/examples/textarea-show-count.tsx
+++ b/docs/examples/textarea-show-count.tsx
@@ -1,10 +1,8 @@
 /* eslint-disable no-console */
-import Input from '@rc-component/input';
+import { TextArea } from '@rc-component/input';
 import React, { useState, type ChangeEvent } from 'react';
 import '../../assets/index.less';
 
-const TextArea = Input.TextArea;
-
 export default function App() {
   const [value, setValue] = useState('hello\nworld');
 

From 729b9fdb9e60668da189994394f79a86101da864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?=
 <66234749+QDyanbing@users.noreply.github.com>
Date: Fri, 20 Mar 2026 23:57:18 +0800
Subject: [PATCH 09/10] Update tests/TextArea.focus.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 tests/TextArea.focus.test.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/TextArea.focus.test.tsx b/tests/TextArea.focus.test.tsx
index 2836ce5..8410740 100644
--- a/tests/TextArea.focus.test.tsx
+++ b/tests/TextArea.focus.test.tsx
@@ -1,8 +1,7 @@
 // @ts-nocheck
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { TextArea } from '../src';
-import type { TextAreaRef } from '../src';
+import { TextArea, type TextAreaRef } from '../src';
 
 describe('focus and blur', () => {
   let focused = false;

From c089678c93fefb328a6eaf07602521531c8fe0e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E8=89=B3=E5=85=B5?=
 <66234749+QDyanbing@users.noreply.github.com>
Date: Fri, 20 Mar 2026 23:57:27 +0800
Subject: [PATCH 10/10] Update tests/TextArea.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 tests/TextArea.test.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/TextArea.test.tsx b/tests/TextArea.test.tsx
index 2ee2ec9..390f1cd 100644
--- a/tests/TextArea.test.tsx
+++ b/tests/TextArea.test.tsx
@@ -1,8 +1,7 @@
 // @ts-nocheck
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { TextArea } from '../src';
-import type { TextAreaProps, TextAreaRef } from '../src';
+import { TextArea, type TextAreaProps, type TextAreaRef } from '../src';
 import calculateAutoSizeStyle, {
   calculateNodeStyling,
 } from '../src/calculateNodeHeight';