Fix(web-react): TextArea should autoresize when mounted

packages/web-react/src/components/TextArea/TextArea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, RefObject, ForwardedRef } from 'react';
+import React, { ForwardedRef, RefObject, forwardRef, useRef } from 'react';
 import { SpiritTextAreaProps } from '../../types';
 import { TextFieldBase } from '../TextFieldBase';
 import { useAdjustHeight } from './useAdjustHeight';
@@ -8,7 +8,7 @@ import { useAdjustHeight } from './useAdjustHeight';
 const _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>): JSX.Element => {
   const { onInput, isAutoResizing, autoResizingMaxHeight = 400, ...restProps } = props;
   const elementReference = useRef(ref);
-  const { onInput: onInputHandler } = useAdjustHeight({
+  const { adjustHeightOnAutoresize, onInput: onInputHandler } = useAdjustHeight({
     elementReference,
     onInput,
     isAutoResizing,
@@ -20,6 +20,7 @@ const _TextArea = (props: SpiritTextAreaProps, ref: ForwardedRef<HTMLTextAreaEle
       isMultiline
       ref={elementReference as RefObject<HTMLTextAreaElement>}
       onInput={onInputHandler}
+      onFocus={adjustHeightOnAutoresize}
       {...restProps}
     />
   );

packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -2,9 +2,9 @@ import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
-import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
-import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { validationStatePropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { validationTextPropsTest } from '../../../../tests/providerTests/validationTextPropsTest';
 import TextArea from '../TextArea';
 
@@ -60,4 +60,20 @@ describe('TextArea', () => {
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('TextArea--fluid');
   });
+
+  describe('autoresizing', () => {
+    it('should adjust height when mounted and autoresizing is enabled', () => {
+      const dom = render(<TextArea id="textarea" label="Label" isFluid isAutoResizing />);
+
+      const element = dom.container.querySelector('textarea') as HTMLElement;
+      expect(element.style.height).toBe('2px');
+    });
+
+    it('should not adjust height when mounted and autoresizing is not used', () => {
+      const dom = render(<TextArea id="textarea" label="Label" isFluid />);
+
+      const element = dom.container.querySelector('textarea') as HTMLElement;
+      expect(element.style.height).toBe('');
+    });
+  });
 });

packages/web-react/src/components/TextArea/__tests__/useAdjustHeight.test.ts

@@ -0,0 +1,35 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { FormEvent, MutableRefObject } from 'react';
+import { useAdjustHeight } from '../useAdjustHeight';
+
+describe('useAdjustHeight', () => {
+  it('should adjust the height of the textarea element', () => {
+    const elementReference: MutableRefObject<HTMLTextAreaElement> = {
+      current: document.createElement('textarea'),
+    };
+    const maxHeight = 200;
+    const onInput = jest.fn();
+    const isAutoResizing = true;
+
+    // @ts-expect-error -- Type 'MutableRefObject<HTMLTextAreaElement>' is not assignable to type 'MutableRefObject<ForwardedRef<HTMLTextAreaElement>>'.
+    const { result } = renderHook(() => useAdjustHeight({ elementReference, maxHeight, onInput, isAutoResizing }));
+
+    const { adjustHeight, adjustHeightOnAutoresize, onInput: inputHandler } = result.current;
+
+    act(() => {
+      adjustHeight(elementReference.current);
+    });
+
+    expect(elementReference.current.style.height).toBe('2px');
+    expect(elementReference.current.style.overflow).toBe('hidden');
+
+    const event = new Event('input') as unknown as FormEvent<HTMLTextAreaElement>;
+
+    act(() => {
+      inputHandler(event);
+    });
+
+    expect(adjustHeightOnAutoresize).toBeDefined();
+    expect(onInput).toHaveBeenCalledWith(event);
+  });
+});

packages/web-react/src/components/TextArea/useAdjustHeight.ts

@@ -1,4 +1,4 @@
-import { FormEvent, FormEventHandler, MutableRefObject, ForwardedRef } from 'react';
+import { FormEvent, FormEventHandler, ForwardedRef, MutableRefObject, useEffect } from 'react';
 
 export interface UseAdjustHeightProps {
   elementReference?: MutableRefObject<ForwardedRef<HTMLTextAreaElement>>;
@@ -8,6 +8,8 @@ export interface UseAdjustHeightProps {
 }
 
 export interface UseAdjustHeightReturn {
+  adjustHeight: (element: HTMLTextAreaElement) => void;
+  adjustHeightOnAutoresize: () => void;
   onInput: FormEventHandler<HTMLTextAreaElement>;
 }
 
@@ -31,7 +33,7 @@ export const useAdjustHeight = ({
     element.style.overflow = totalHeight < maxHeight ? 'hidden' : 'auto';
   };
 
-  const inputHandler = (event: FormEvent<HTMLTextAreaElement>) => {
+  const adjustHeightOnAutoresize = () => {
     if (isAutoResizing) {
       // Because of mixed props for input and textarea
       const textArea = elementReference?.current as unknown as HTMLTextAreaElement;
@@ -40,13 +42,28 @@ export const useAdjustHeight = ({
         adjustHeight(textArea);
       }
     }
+  };
+
+  const inputHandler = (event: FormEvent<HTMLTextAreaElement>) => {
+    adjustHeightOnAutoresize();
 
     if (onInput) {
       onInput(event);
     }
   };
 
+  /**
+   * This is the equivalent of the initialization function
+   * It will run only once when the component is mounted
+   */
+  useEffect(() => {
+    adjustHeightOnAutoresize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Empty deps array to run only once
+  }, []);
+
   return {
+    adjustHeight,
+    adjustHeightOnAutoresize,
     onInput: inputHandler,
   };
 };