fix: fix Firefox scroll bug and improve TextArea tests (#72)

Author: QdabuliuQ

src/ResizableTextArea.tsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames';
 import ResizeObserver from '@rc-component/resize-observer';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import raf from '@rc-component/util/lib/raf';
+import classNames from 'classnames';
 import * as React from 'react';
 import type { TextAreaProps } from '.';
 import calculateAutoSizeStyle from './calculateNodeHeight';
@@ -66,9 +66,10 @@ const ResizableTextArea = React.forwardRef<ResizableTextAreaRef, TextAreaProps>(
     // https://github.com/ant-design/ant-design/issues/21870
     const fixFirefoxAutoScroll = () => {
       try {
+        const isFirefox = navigator.userAgent.includes('Firefox');
         // FF has bug with jump of scroll to top. We force back here.
-        if (document.activeElement === textareaRef.current) {
-          const { selectionStart, selectionEnd, scrollTop } =
+        if (isFirefox && document.activeElement === textareaRef.current) {
+          const { scrollTop, selectionStart, selectionEnd } =
             textareaRef.current;
 
           // Fix Safari bug which not rollback when break line

tests/index.spec.tsx

@@ -37,6 +37,42 @@ describe('TextArea', () => {
     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');
@@ -235,18 +271,23 @@ describe('TextArea', () => {
     container.querySelector('textarea').focus();
     expect(document.activeElement).toBe(container.querySelector('textarea'));
 
-    const setSelectionRangeFn = jest.spyOn(
-      container.querySelector('textarea'),
-      'setSelectionRange',
-    );
+    // 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(setSelectionRangeFn).toHaveBeenCalled();
+    expect(container.querySelector('textarea').scrollTop).toBe(
+      container.querySelector('textarea').scrollHeight,
+    );
     unmount();
   });