Merge pull request #553 from devtron-labs/fix/text-area

fix: text area controlled/uncontrolled issue

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.2",
+    "version": "1.6.3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes, useRef } from 'react'
+import { TextareaHTMLAttributes, useEffect, useRef, useState } from 'react'
 import {
     COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP,
     COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP,
@@ -27,9 +27,13 @@ const Textarea = ({
     size = ComponentSizeType.large,
     ariaLabel,
     borderRadiusConfig,
+    value,
     ...props
 }: TextareaProps) => {
     const textareaRef = useRef<HTMLTextAreaElement>(null)
+    // If the passed value remains the same, the component will behave as un-controlled
+    // else, it behaves as controlled
+    const [text, setText] = useState('')
 
     const updateRefsHeight = (height: number) => {
         const refElement = textareaRef.current
@@ -57,7 +61,17 @@ const Textarea = ({
         updateRefsHeight(nextHeight)
     }
 
-    useThrottledEffect(reInitHeight, 300, [props.value])
+    useEffect(() => {
+        setText(value)
+    }, [value])
+
+    useThrottledEffect(reInitHeight, 300, [text])
+
+    const handleChange: TextareaProps['onChange'] = (e) => {
+        setText(e.target.value)
+
+        props.onChange?.(e)
+    }
 
     const handleBlur: TextareaProps['onBlur'] = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
@@ -113,6 +127,8 @@ const Textarea = ({
                 spellCheck={false}
                 data-testid={name}
                 required={required}
+                value={text}
+                onChange={handleChange}
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
                 className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} ${getFormFieldBorderClassName(borderRadiusConfig)} w-100 dc__overflow-auto textarea`}

src/Shared/Components/Textarea/Textarea.component.tsx

@@ -5,7 +5,7 @@ import { FormFieldWrapperProps } from '../FormFieldWrapper'
 export interface TextareaProps
     extends Omit<FormFieldWrapperProps, 'children' | 'inputId'>,
         Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'disabled' | 'autoFocus' | 'onFocus'>,
-        Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'onChange' | 'value' | 'name'>> {
+        Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'onChange' | 'name'>> {
     /**
      * If false, the input is not trimmed on blur
      *
@@ -18,4 +18,8 @@ export interface TextareaProps
      * @default ComponentSizeType.large
      */
     size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
+    /**
+     * Value of the textarea
+     */
+    value: string
 }