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

refs #DS-1158
lmc-eu · Feb 26, 2024 · 3aba6ec · 3aba6ec
1 parent 45aec24
commit 3aba6ec
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/web-react/src/components/TextArea/TextArea.tsx b/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, useEffect, useRef } from 'react';
 import { SpiritTextAreaProps } from '../../types';
 import { TextFieldBase } from '../TextFieldBase';
 import { useAdjustHeight } from './useAdjustHeight';
@@ -8,13 +8,24 @@ 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 { adjustHeight, onInput: onInputHandler } = useAdjustHeight({
     elementReference,
     onInput,
     isAutoResizing,
     maxHeight: autoResizingMaxHeight,
   });
 
+  useEffect(() => {
+    if (isAutoResizing) {
+      // Because of mixed props for input and textarea
+      const textArea = elementReference?.current as unknown as HTMLTextAreaElement;
+
+      if (textArea) {
+        adjustHeight(textArea);
+      }
+    }
+  }, [isAutoResizing, adjustHeight, elementReference]);
+
   return (
     <TextFieldBase
       isMultiline

diff --git a/packages/web-react/src/components/TextArea/useAdjustHeight.ts b/packages/web-react/src/components/TextArea/useAdjustHeight.ts
@@ -1,4 +1,4 @@
-import { FormEvent, FormEventHandler, MutableRefObject, ForwardedRef } from 'react';
+import { FormEvent, FormEventHandler, ForwardedRef, MutableRefObject } from 'react';
 
 export interface UseAdjustHeightProps {
   elementReference?: MutableRefObject<ForwardedRef<HTMLTextAreaElement>>;
@@ -8,6 +8,7 @@ export interface UseAdjustHeightProps {
 }
 
 export interface UseAdjustHeightReturn {
+  adjustHeight: (element: HTMLTextAreaElement) => void;
   onInput: FormEventHandler<HTMLTextAreaElement>;
 }
 
@@ -47,6 +48,7 @@ export const useAdjustHeight = ({
   };
 
   return {
+    adjustHeight,
     onInput: inputHandler,
   };
 };