Fixing value prop for text input & text area (EightfoldAI#204)

* Fixing value prop for text input & text area Co-authored-by: darora <>
thiyagaraj-eightfold · Jun 23, 2022 · a007990 · a007990
1 parent fc660f9
commit a007990
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/src/components/Inputs/TextArea/TextArea.stories.tsx b/src/components/Inputs/TextArea/TextArea.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { TextArea, TextInputTheme, TextInputWidth } from '../index';
@@ -74,9 +74,10 @@ export default {
     },
 } as ComponentMeta<typeof TextArea>;
 
-const Text_Area_Story: ComponentStory<typeof TextArea> = (args) => (
-    <TextArea {...args} />
-);
+const Text_Area_Story: ComponentStory<typeof TextArea> = (args) => {
+    const [val, setVal] = useState(args.value);
+    return <TextArea {...args} value={val} onChange={(e) => setVal(e.target.value)} />
+};
 
 export const Text_Area = Text_Area_Story.bind({});
 

diff --git a/src/components/Inputs/TextArea/TextArea.tsx b/src/components/Inputs/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Ref, useState } from 'react';
+import React, {FC, Ref, useEffect, useState} from 'react';
 import { Icon, IconName } from '../../Icon';
 import { Label } from '../../Label';
 import { TextInputWidth, TextAreaProps, TextInputTheme } from '../index';
@@ -39,6 +39,7 @@ export const TextArea: FC<TextAreaProps> = React.forwardRef(
         ref: Ref<HTMLTextAreaElement>
     ) => {
         const [textAreaId] = useState<string>(uniqueId(id || 'textarea-'));
+        const [inputValue, setInputValue] = useState(value);
 
         const textAreaClassNames: string = mergeClasses([
             classNames,
@@ -55,6 +56,8 @@ export const TextArea: FC<TextAreaProps> = React.forwardRef(
             },
         ]);
 
+        useEffect(() => setInputValue(value), [value]);
+
         const debouncedChange = useDebounce<
             React.ChangeEvent<HTMLTextAreaElement>
         >(
@@ -70,6 +73,7 @@ export const TextArea: FC<TextAreaProps> = React.forwardRef(
         // Reference: https://reactjs.org/docs/legacy-event-pooling.html
         const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
             e.persist();
+            setInputValue(e.target.value);
             debouncedChange(e);
         };
 
@@ -98,7 +102,7 @@ export const TextArea: FC<TextAreaProps> = React.forwardRef(
                     style={style}
                     rows={textAreaRows}
                     tabIndex={0}
-                    value={value}
+                    value={inputValue}
                 />
                 {enableExpand && (
                     <Icon

diff --git a/src/components/Inputs/TextInput/TextInput.stories.tsx b/src/components/Inputs/TextInput/TextInput.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { IconName } from '../../Icon';
@@ -106,9 +106,10 @@ export default {
     },
 } as ComponentMeta<typeof TextInput>;
 
-const Text_Input_Story: ComponentStory<typeof TextInput> = (args) => (
-    <TextInput {...args} />
-);
+const Text_Input_Story: ComponentStory<typeof TextInput> = (args) => {
+    const [val, setVal] = useState(args.value);
+    return <TextInput {...args} value={val} onChange={(e) => setVal(e.target.value)} />
+};
 
 export const Text_Input = Text_Input_Story.bind({});
 

diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx
@@ -50,6 +50,8 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
         },
         ref: Ref<HTMLInputElement>
     ) => {
+        const [inputValue, setInputValue] = useState(value);
+
         const [clearButtonShown, _setClearButtonShown] =
             useState<boolean>(false);
         const [inputId] = useState<string>(uniqueId(id || 'input-'));
@@ -120,6 +122,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
         ]);
 
         useEffect(() => {
+            setInputValue(value);
             if (value?.toString()?.length > 0) {
                 return setClearButtonShown(true);
             }
@@ -138,6 +141,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
             if (!!inputField) {
                 (inputField as HTMLInputElement).value = '';
             }
+            setInputValue('');
             onClear?.(_event);
             setClearButtonShown(false);
         };
@@ -167,6 +171,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
         // Reference: https://reactjs.org/docs/legacy-event-pooling.html
         const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             e.persist();
+            setInputValue(e.target.value);
             debouncedChange(e);
         };
 
@@ -194,7 +199,7 @@ export const TextInput: FC<TextInputProps> = React.forwardRef(
                     style={style}
                     tabIndex={0}
                     type={numbersOnly ? 'number' : htmlType}
-                    value={value}
+                    value={inputValue}
                     readOnly={readonly}
                 />
                 {iconProps && (