Merge pull request #625 from LifeSG/MOL-17154

[MOL-17154][AM] update handle change behaviour in textarea
LifeSG · Dec 5, 2024 · f7cf5b9 · f7cf5b9
2 parents 4be099f + 28e77cf
commit f7cf5b9
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 11 deletions.
diff --git a/src/form/form-textarea.tsx b/src/form/form-textarea.tsx
@@ -29,6 +29,7 @@ const FormTextareaComponent = (
         mobileCols,
         tabletCols,
         desktopCols,
+        transformValue,
         ...otherProps
     } = props;
 
@@ -56,11 +57,14 @@ const FormTextareaComponent = (
     // =============================================================================
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         const newValue = event.target.value;
-        if (!(otherProps.maxLength && newValue.length > otherProps.maxLength)) {
-            setStateValue(newValue);
-            event.target.value = newValue;
-            if (onChange) onChange(event);
-        }
+
+        const transformedValue = transformValue
+            ? transformValue(newValue ?? "")
+            : newValue;
+
+        setStateValue(transformedValue);
+        event.target.value = transformedValue;
+        if (onChange) onChange(event);
     };
 
     // =============================================================================

diff --git a/src/input-textarea/textarea.tsx b/src/input-textarea/textarea.tsx
@@ -29,7 +29,14 @@ export const TextareaBase = React.forwardRef(TextareaBaseComponent);
 // =============================================================================
 
 const TextareaComponent = (
-    { value, disabled, rows = 5, onChange, ...otherProps }: TextareaProps,
+    {
+        value,
+        disabled,
+        rows = 5,
+        onChange,
+        transformValue,
+        ...otherProps
+    }: TextareaProps,
     ref: TextareaRef
 ) => {
     // -------------------------------------------------------------------------
@@ -51,11 +58,14 @@ const TextareaComponent = (
     // -------------------------------------------------------------------------
     const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         const newValue = event.target.value;
-        if (!(otherProps.maxLength && newValue.length > otherProps.maxLength)) {
-            setStateValue(newValue);
-            event.target.value = newValue;
-            if (onChange) onChange(event);
-        }
+
+        const transformedValue = transformValue
+            ? transformValue(newValue ?? "")
+            : newValue;
+
+        setStateValue(transformedValue);
+        event.target.value = transformedValue;
+        if (onChange) onChange(event);
     };
 
     // -------------------------------------------------------------------------

diff --git a/src/input-textarea/types.ts b/src/input-textarea/types.ts
@@ -4,6 +4,7 @@ export interface TextareaProps
     extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     error?: boolean | undefined;
     "data-testid"?: string | undefined;
+    transformValue?: ((value: string) => string) | undefined;
     renderCustomCounter?:
         | ((maxLength: number, currentValueLength: number) => JSX.Element)
         | undefined;

diff --git a/stories/form/form-textarea/form-textarea.mdx b/stories/form/form-textarea/form-textarea.mdx
@@ -32,6 +32,12 @@ const renderCustomCounter = (maxLength: number, currentValueLength: number) => {
 };
 ```
 
+<Heading3>Transform value</Heading3>
+
+You can specify the `transformValue` prop to format or sanitise input.
+
+<Canvas of={FormTextareaStories.TransformValue} />
+
 <Heading3>Rendering in grid layouts</Heading3>
 
 You can also specify [ColDiv's](/docs/getting-started-layout-column-divs--docs)

diff --git a/stories/form/form-textarea/form-textarea.stories.tsx b/stories/form/form-textarea/form-textarea.stories.tsx
@@ -55,6 +55,24 @@ export const Default: StoryObj<Component> = {
     },
 };
 
+export const TransformValue: StoryObj<Component> = {
+    render: () => {
+        return (
+            <StoryContainer>
+                <Container>
+                    <Form.Textarea
+                        label="This removes special characters"
+                        maxLength={100}
+                        transformValue={(value) =>
+                            value.replace(/[^A-Za-z0-9 ]/g, "")
+                        }
+                    />
+                </Container>
+            </StoryContainer>
+        );
+    },
+};
+
 export const WithCustomCounter: StoryObj<Component> = {
     render: () => {
         return (

diff --git a/stories/form/form-textarea/props-table.tsx b/stories/form/form-textarea/props-table.tsx
@@ -45,6 +45,11 @@ const DATA: ApiTableSectionProps[] = [
                     "(maxLength: number,currentValueLength: number) => JSX.Element",
                 ],
             },
+            {
+                name: "transformValue",
+                description: "Function to transform value",
+                propTypes: ["(value: string) => string"],
+            },
         ],
     },
     ...SHARED_FORM_PROPS_DATA,