fix(Textarea): update defaultValue and value props logic and stories (#…

…1680)
Frontify · Dec 14, 2023 · 72c8790 · 72c8790
1 parent 86a0485
commit 72c8790
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/components/Textarea/Textarea.cy.tsx b/src/components/Textarea/Textarea.cy.tsx
@@ -2,7 +2,8 @@
 
 import { IconClipboard16, IconNook16, IconQuestionMark16 } from '@foundation/Icon';
 import { Textarea } from './Textarea';
-import { Validation } from '@utilities/validation';
+import { Validation, validationClassMap } from '@utilities/validation';
+import { ExtraAction } from 'src/types/input';
 
 const TEXTAREA_ID = '[data-test-id=fondue-textarea]';
 const TEXTAREA_DECORATOR_ID = '[data-test-id=fondue-textarea-decorator]';
@@ -13,7 +14,7 @@ const DEFAULT_TEXT = 'I am some text text.';
 const PLACEHOLDER = 'Enter some text in the textarea';
 const INPUT_TEXT = 'I am some input text';
 const ROW_HEIGHT = 20;
-const EXTRA_ACTIONS = [
+const EXTRA_ACTIONS: ExtraAction[] = [
     {
         icon: <IconClipboard16 />,
         title: 'Save to Clipboard',
@@ -48,6 +49,11 @@ describe('Textarea Unit tests', () => {
         cy.get(TEXTAREA_ID).should('have.value', DEFAULT_TEXT);
     });
 
+    it('sets and gets the value', () => {
+        cy.mount(<Textarea id="12345" />);
+        cy.get(TEXTAREA_ID).should('have.attr', 'id', '12345');
+    });
+
     it('should allow for text to be typed', () => {
         cy.mount(<Textarea />);
         cy.get(TEXTAREA_ID).type(INPUT_TEXT);
@@ -64,11 +70,6 @@ describe('Textarea Unit tests', () => {
         cy.get(TEXTAREA_DECORATOR_ID).should('be.visible');
     });
 
-    it('should render status icon', () => {
-        cy.mount(<Textarea status={Validation.Error} />);
-        cy.get(TEXTAREA_STATUS_ICON_ID).should('be.visible');
-    });
-
     it('has the required attribute', () => {
         cy.mount(<Textarea required={true} />);
         cy.get(TEXTAREA_ID).should('have.attr', 'required');
@@ -199,4 +200,14 @@ describe('Textarea Unit tests', () => {
         cy.mount(<Textarea extraActions={EXTRA_ACTIONS} />);
         cy.get(TEXTAREA_EXTRA_ACTION_ID).should('be.visible');
     });
+
+    it('should render the correct validation styling', () => {
+        cy.mount(<Textarea status={Validation.Error} />);
+        cy.get(TEXTAREA_ID).should('have.class', validationClassMap[Validation.Error]);
+    });
+
+    it('should render status icon', () => {
+        cy.mount(<Textarea status={Validation.Error} />);
+        cy.get(TEXTAREA_STATUS_ICON_ID).should('be.visible');
+    });
 });
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
@@ -68,6 +68,14 @@ export default {
                 defaultValue: { summary: undefined },
             },
         },
+        value: {
+            type: 'string',
+            description: 'Value set by parent',
+            table: {
+                type: { summary: 'string | undefined' },
+                defaultValue: { summary: undefined },
+            },
+        },
         disabled: {
             type: 'boolean',
             table: {
@@ -152,6 +160,7 @@ export default {
             type: 'function',
             description: 'Callback function to return current value on the `Textarea`',
             table: {
+                type: { summary: '((value: string) => void) | undefined' },
                 defaultValue: { summary: undefined },
             },
         },
@@ -206,7 +215,13 @@ export default {
 } as Meta<TextareaProps>;
 
 const TextareaTemplate: StoryFn<TextareaProps> = (args) => {
-    const [input, setInput] = useState<string | undefined>(undefined);
+    const { value } = args;
+    const [input, setInput] = useState<string | undefined>(value ?? undefined);
+    useEffect(() => {
+        if (value) {
+            setInput(value);
+        }
+    }, [value, setInput]);
 
     return (
         <Box className="tw-w-[80%] tw-ml-auto tw-mr-auto">

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -89,6 +89,13 @@ export const Textarea = ({
         focusOnMount && textareaRef.current?.focus();
     }, [focusOnMount, textareaRef]);
 
+    useEffect(() => {
+        const isValueSet = value !== textareaRef.current?.value;
+        if (textareaRef.current && value && !isValueSet) {
+            textareaRef.current.value = value;
+        }
+    }, [value, textareaRef]);
+
     const autosizeProps = { minRows, maxRows };
 
     const getPaddingRight = () => {
@@ -145,7 +152,8 @@ export const Textarea = ({
                     readOnly={readOnly}
                     ref={textareaRef}
                     required={required}
-                    value={defaultValue ?? value}
+                    defaultValue={defaultValue}
+                    value={value}
                     placeholder={placeholder}
                     onBlur={onBlur}
                     onChange={handleOnChange}
@@ -162,12 +170,12 @@ export const Textarea = ({
                     aria-label={dataTestId}
                     data-test-id={dataTestId}
                     className={merge([
-                        InputStyles.base,
                         hugWidth ? '' : InputStyles.width,
                         minRows ? '' : InputStyles.height,
                         InputStyles.disabled,
                         InputStyles.readOnly,
                         InputStyles.element,
+                        InputStyles.base,
                         InputStyles.focus,
                         InputStyles.hover,
                         isFocusVisible && FOCUS_STYLE,