fix: Textarea ref miss nativeElement (#56803)

* fix: Textarea miss nativeElement

* chore: update snap

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>

components/input/TextArea.tsx

@@ -67,6 +67,7 @@ export interface TextAreaRef {
   focus: (options?: InputFocusOptions) => void;
   blur: () => void;
   resizableTextArea?: RcTextAreaRef['resizableTextArea'];
+  nativeElement: HTMLElement | null;
 }
 
 const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
@@ -134,6 +135,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
       triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
     },
     blur: () => innerRef.current?.blur(),
+    nativeElement: innerRef.current?.nativeElement || null,
   }));
 
   const prefixCls = getPrefixCls('input', customizePrefixCls);

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -12160,6 +12160,33 @@ Array [
       </span>
     </span>
   </span>,
+  <br />,
+  <textarea
+    aria-describedby="test-id"
+    class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
+    placeholder="TextArea wrapped in Tooltip for debugging"
+    style="margin-top: 16px;"
+  />,
+  <div
+    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-test-id ant-tooltip-placement-top"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+  >
+    <div
+      class="ant-tooltip-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    >
+      <span
+        class="ant-tooltip-arrow-content"
+      />
+    </div>
+    <div
+      class="ant-tooltip-container"
+      id="test-id"
+      role="tooltip"
+    >
+      Debug TextArea with Tooltip
+    </div>
+  </div>,
 ]
 `;
 

components/input/__tests__/__snapshots__/demo.test.tsx.snap

@@ -5477,6 +5477,12 @@ Array [
       </span>
     </span>
   </span>,
+  <br />,
+  <textarea
+    class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
+    placeholder="TextArea wrapped in Tooltip for debugging"
+    style="margin-top:16px"
+  />,
 ]
 `;
 

components/input/__tests__/textarea.test.tsx

@@ -605,4 +605,18 @@ describe('TextArea allowClear', () => {
     fireEvent.mouseUp(container.querySelector('textarea')!);
     expect(container.querySelector('.ant-input-mouse-active')).toBeFalsy();
   });
+
+  describe('ref.nativeElement should be the root div', () => {
+    it('basic', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(<TextArea ref={ref} />);
+      expect(ref.current?.nativeElement).toBe(container.firstChild);
+    });
+
+    it('with showCount', () => {
+      const ref = React.createRef<TextAreaRef>();
+      const { container } = render(<TextArea ref={ref} showCount />);
+      expect(ref.current?.nativeElement).toBe(container.firstChild);
+    });
+  });
 });

components/input/demo/textarea-resize.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { Button, Input } from 'antd';
+import React, { useRef, useState } from 'react';
+import { Button, Input, Tooltip } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
 
 const { TextArea } = Input;
 
@@ -8,6 +9,7 @@ const defaultValue =
 
 const App: React.FC = () => {
   const [autoResize, setAutoResize] = useState(false);
+  const textAreaRef = useRef<TextAreaRef>(null);
 
   return (
     <>
@@ -23,6 +25,15 @@ const App: React.FC = () => {
         }}
         showCount
       />
+      <br />
+      <Tooltip title="Debug TextArea with Tooltip">
+        <TextArea
+          ref={textAreaRef}
+          placeholder="TextArea wrapped in Tooltip for debugging"
+          style={{ marginTop: 16 }}
+          onFocus={() => console.log('nativeElement:', textAreaRef.current?.nativeElement)}
+        />
+      </Tooltip>
     </>
   );
 };