Repository: ant-design/ant-design-mobile (ts)

Issue:
TextArea设置autoSize后删除文字时，高度未自适应
### Version of antd-mobile

5.28.1

### Operating system and its version

iOS, Others

### Browser and its version

Chrome 111.0.5563.64

### Sandbox to reproduce

https://mobile.ant.design/zh/components/text-area

### What happened?

问题现象：TextArea删除文字时高度未自适应
期望现象：TextArea删除文字时高度自适应

### Relevant log output

_No response_

Pull request description:
fix(TextArea): fix the height not adapting when setting `autoSize`
Close #6051 

Patch:
diff --git a/src/components/text-area/text-area.less b/src/components/text-area/text-area.less
index 313bd9ad6..c2c10679f 100644
--- a/src/components/text-area/text-area.less
+++ b/src/components/text-area/text-area.less
@@ -63,6 +63,14 @@
   &[readonly] {
     pointer-events: none;
   }
+
+  &-hidden {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1000;
+  }
 }
 
 .adm-text-area-count {
diff --git a/src/components/text-area/text-area.tsx b/src/components/text-area/text-area.tsx
index dfc4364f7..3113081c6 100644
--- a/src/components/text-area/text-area.tsx
+++ b/src/components/text-area/text-area.tsx
@@ -78,6 +78,8 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
     const nativeTextAreaRef = useRef<HTMLTextAreaElement>(null)
     // https://github.com/ant-design/ant-design-mobile/issues/5961
     const heightRef = useRef<string>('auto')
+    // https://github.com/ant-design/ant-design-mobile/issues/6051
+    const hiddenTextAreaRef = useRef<HTMLTextAreaElement>(null)
 
     useImperativeHandle(ref, () => ({
       clear: () => {
@@ -97,9 +99,11 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
     useIsomorphicLayoutEffect(() => {
       if (!autoSize) return
       const textArea = nativeTextAreaRef.current
+      const hiddenTextArea = hiddenTextAreaRef.current
       if (!textArea) return
       textArea.style.height = heightRef.current
-      let height = textArea.scrollHeight
+      if (!hiddenTextArea) return
+      let height = hiddenTextArea.scrollHeight
       if (typeof autoSize === 'object') {
         const computedStyle = window.getComputedStyle(textArea)
         const lineHeight = parseFloat(computedStyle.lineHeight)
@@ -169,6 +173,16 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
           onClick={props.onClick}
         />
         {count}
+
+        {autoSize && (
+          <textarea
+            ref={hiddenTextAreaRef}
+            className={`${classPrefix}-element ${classPrefix}-element-hidden`}
+            value={value}
+            aria-hidden
+            readOnly
+          />
+        )}
       </div>
     )
   }


Test patch:
diff --git a/src/components/text-area/tests/text-area.test.tsx b/src/components/text-area/tests/text-area.test.tsx
index 6515972b9..1f0422650 100644
--- a/src/components/text-area/tests/text-area.test.tsx
+++ b/src/components/text-area/tests/text-area.test.tsx
@@ -33,15 +33,18 @@ describe('TextArea', () => {
     const maxRows = 5
     const { getByRole } = render(<TextArea autoSize={{ minRows, maxRows }} />)
     const textarea = getByRole('textbox')
+    const hiddenTextarea = document.querySelector(
+      `.${classPrefix}-element-hidden`
+    )!
     // mock
-    Object.defineProperty(textarea, 'scrollHeight', {
+    Object.defineProperty(hiddenTextarea, 'scrollHeight', {
       value: lineHeight * 2,
       configurable: true,
     })
     fireEvent.change(textarea, { target: { value: '1' } })
     expect(textarea.style.height).toBe(`${lineHeight * minRows}px`)
 
-    Object.defineProperty(textarea, 'scrollHeight', {
+    Object.defineProperty(hiddenTextarea, 'scrollHeight', {
       value: lineHeight * 6,
     })
     fireEvent.change(textarea, { target: { value: '2' } })