From 09f80dfe4d3a313b41bd712f91bac0b43fccb0c7 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Thu, 5 Dec 2024 13:15:25 +0100
Subject: [PATCH 1/7] feat(textarea): add possibility to set max char length

---
 app/components/inputs/Textarea.tsx            |  5 +-
 .../inputs/__test__/Textarea.test.tsx         | 68 ++++++++++++++++++-
 .../userFeedback/FeedbackFormBox.tsx          |  1 +
 .../cms/components/StrapiTextarea.tsx         | 13 +++-
 stories/Textarea.stories.tsx                  |  4 ++
 5 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
index 9761cb3f2..c34652210 100644
--- a/app/components/inputs/Textarea.tsx
+++ b/app/components/inputs/Textarea.tsx
@@ -3,7 +3,6 @@ import type { AriaRole, ReactNode } from "react";
 import { useField } from "remix-validated-form";
 import { Details } from "~/components/Details";
 import InputLabel from "~/components/inputs/InputLabel";
-import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 import { type ErrorMessageProps } from ".";
 import InputError from "./InputError";
 import RichText from "../RichText";
@@ -17,6 +16,7 @@ type TextareaProps = Readonly<{
     content: string;
   };
   placeholder?: string;
+  maxCharacterLimit: number;
   errorMessages?: ErrorMessageProps[];
   formId?: string;
   classNameLabel?: string;
@@ -33,6 +33,7 @@ const Textarea = ({
   label,
   details,
   placeholder,
+  maxCharacterLimit,
   errorMessages,
   classNameLabel,
   role,
@@ -60,7 +61,7 @@ const Textarea = ({
         {...getInputProps({
           id: name,
           placeholder,
-          maxLength: TEXTAREA_CHAR_LIMIT,
+          maxLength: maxCharacterLimit,
         })}
         rows={TEXT_AREA_ROWS}
         className={classNames(
diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index e901a329f..35ebacfd5 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -27,15 +27,24 @@ afterEach(() => {
 describe("Textarea component", () => {
   it("renders without errors", () => {
     const componentName = "test-textarea";
+    const maxLength = 5000;
+
     getInputProps.mockImplementationOnce(() => ({
       id: componentName,
       placeholder: "Test Placeholder",
+      maxLength: maxLength,
     }));
+
     const RemixStub = createRemixStub([
       {
         path: "",
         Component: () => (
-          <Textarea name={componentName} label="Test Label" formId="formId" />
+          <Textarea
+            name={componentName}
+            maxCharacterLimit={maxLength}
+            label="Test Label"
+            formId="formId"
+          />
         ),
       },
     ]);
@@ -51,6 +60,8 @@ describe("Textarea component", () => {
     expect(elementByLabel).not.toHaveClass("ds-heading-03-reg");
 
     expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+
+    expect(element).toHaveAttribute("maxLength", maxLength.toString());
   });
 
   it("renders without errors when description is provided", () => {
@@ -63,6 +74,7 @@ describe("Textarea component", () => {
             label="Test Label"
             description="Test Description"
             formId="formId"
+            maxCharacterLimit={5000}
           />
         ),
       },
@@ -90,6 +102,7 @@ describe("Textarea component", () => {
               content: "Lorem ipsum",
             }}
             formId="formId"
+            maxCharacterLimit={5000}
           />
         ),
       },
@@ -110,6 +123,7 @@ describe("Textarea component", () => {
             name="test"
             errorMessages={[{ code: "required", text: "error" }]}
             formId="formId"
+            maxCharacterLimit={5000}
           />
         ),
       },
@@ -128,7 +142,13 @@ describe("Textarea component", () => {
     const RemixStub = createRemixStub([
       {
         path: "",
-        Component: () => <Textarea name="componentName" label="Test Label" />,
+        Component: () => (
+          <Textarea
+            maxCharacterLimit={5000}
+            name="componentName"
+            label="Test Label"
+          />
+        ),
       },
     ]);
 
@@ -144,7 +164,13 @@ describe("Textarea component", () => {
     const RemixStub = createRemixStub([
       {
         path: "",
-        Component: () => <Textarea name="componentName" label="Test Label" />,
+        Component: () => (
+          <Textarea
+            maxCharacterLimit={5000}
+            name="componentName"
+            label="Test Label"
+          />
+        ),
       },
     ]);
 
@@ -154,4 +180,40 @@ describe("Textarea component", () => {
 
     expect(textarea.getAttribute("rows")).toEqual(TEXT_AREA_ROWS.toString());
   });
+
+  it("should enforce maxCharacterLength limit", () => {
+    const maxLength = 10;
+    getInputProps.mockImplementationOnce(() => ({
+      id: "componentName",
+      maxLength: maxLength,
+      onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        e.target.value = e.target.value.slice(0, maxLength);
+      },
+    }));
+
+    const RemixStub = createRemixStub([
+      {
+        path: "",
+        Component: () => (
+          <Textarea
+            name="componentName"
+            label="Test Label"
+            formId="formId"
+            maxCharacterLimit={maxLength}
+          />
+        ),
+      },
+    ]);
+
+    render(<RemixStub />);
+
+    const textarea = screen.getByRole<HTMLTextAreaElement>("textbox");
+
+    fireEvent.change(textarea, {
+      target: { value: "This is a very long text" },
+    });
+
+    expect(textarea.value.length).toEqual(maxLength);
+    expect(textarea.value).toEqual("This is a ");
+  });
 });
diff --git a/app/components/userFeedback/FeedbackFormBox.tsx b/app/components/userFeedback/FeedbackFormBox.tsx
index 8abfb9d47..6a1abbf1e 100644
--- a/app/components/userFeedback/FeedbackFormBox.tsx
+++ b/app/components/userFeedback/FeedbackFormBox.tsx
@@ -76,6 +76,7 @@ export const FeedbackFormBox = ({
           placeholder={feedbackTranslations["placeholder-feedback"]}
           role="status"
           innerRef={textAreaReference}
+          maxCharacterLimit={TEXTAREA_CHAR_LIMIT}
         />
         <ButtonContainer>
           <Button
diff --git a/app/services/cms/components/StrapiTextarea.tsx b/app/services/cms/components/StrapiTextarea.tsx
index a4163a027..276cb8c94 100644
--- a/app/services/cms/components/StrapiTextarea.tsx
+++ b/app/services/cms/components/StrapiTextarea.tsx
@@ -5,6 +5,7 @@ import {
   StrapiErrorRelationSchema,
 } from "~/services/cms/flattenStrapiErrors";
 import { StrapiDetailsSchema } from "~/services/cms/models/StrapiDetails";
+import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 import { omitNull } from "~/util/omitNull";
 import { HasOptionalStrapiIdSchema } from "../models/HasStrapiId";
 
@@ -16,6 +17,7 @@ const StrapiTextareaSchema = z
     label: z.string().nullable(),
     placeholder: z.string().nullable(),
     errors: StrapiErrorRelationSchema,
+    maxCharacterLimit: z.number().default(TEXTAREA_CHAR_LIMIT),
   })
   .merge(HasOptionalStrapiIdSchema);
 
@@ -25,6 +27,11 @@ export const StrapiTextareaComponentSchema = StrapiTextareaSchema.extend({
   __component: z.literal("form-elements.textarea"),
 });
 
-export const StrapiTextarea = ({ errors, ...props }: StrapiTextarea) => (
-  <Textarea {...omitNull(props)} errorMessages={flattenStrapiErrors(errors)} />
-);
+export const StrapiTextarea = ({ errors, ...props }: StrapiTextarea) => {
+  return (
+    <Textarea
+      {...omitNull(props)}
+      errorMessages={flattenStrapiErrors(errors)}
+    />
+  );
+};
diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
index 4eded22c2..3d2b0b72b 100644
--- a/stories/Textarea.stories.tsx
+++ b/stories/Textarea.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { remixContext } from "../.storybook/remixContext";
 import Textarea from "../app/components/inputs/Textarea";
+import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 
 const meta = {
   title: "Component/Textarea",
@@ -20,6 +21,7 @@ export const Default: Story = {
     name: "textarea",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
+    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -30,6 +32,7 @@ export const WithDescription: Story = {
     description: "Lorem **ipsum**\n\n* _Lorem ipsum_\n* _Lorem ipsum_",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
+    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -43,6 +46,7 @@ export const Withdetails: Story = {
     },
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
+    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };

From a36df36cf07101ab94b7837c4511ce5600442b1e Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Fri, 6 Dec 2024 09:55:22 +0100
Subject: [PATCH 2/7] ref(textarea): renaming to natural name maxLength

---
 app/components/inputs/Textarea.tsx            |  6 ++---
 .../inputs/__test__/Textarea.test.tsx         | 22 ++++++-------------
 .../userFeedback/FeedbackFormBox.tsx          |  2 +-
 .../cms/components/StrapiTextarea.tsx         |  4 +++-
 stories/Textarea.stories.tsx                  |  6 ++---
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
index c34652210..1c3567008 100644
--- a/app/components/inputs/Textarea.tsx
+++ b/app/components/inputs/Textarea.tsx
@@ -16,7 +16,7 @@ type TextareaProps = Readonly<{
     content: string;
   };
   placeholder?: string;
-  maxCharacterLimit: number;
+  maxLength: number;
   errorMessages?: ErrorMessageProps[];
   formId?: string;
   classNameLabel?: string;
@@ -33,7 +33,7 @@ const Textarea = ({
   label,
   details,
   placeholder,
-  maxCharacterLimit,
+  maxLength,
   errorMessages,
   classNameLabel,
   role,
@@ -61,7 +61,7 @@ const Textarea = ({
         {...getInputProps({
           id: name,
           placeholder,
-          maxLength: maxCharacterLimit,
+          maxLength,
         })}
         rows={TEXT_AREA_ROWS}
         className={classNames(
diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index 35ebacfd5..d375a64e4 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -41,7 +41,7 @@ describe("Textarea component", () => {
         Component: () => (
           <Textarea
             name={componentName}
-            maxCharacterLimit={maxLength}
+            maxLength={maxLength}
             label="Test Label"
             formId="formId"
           />
@@ -74,7 +74,7 @@ describe("Textarea component", () => {
             label="Test Label"
             description="Test Description"
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -102,7 +102,7 @@ describe("Textarea component", () => {
               content: "Lorem ipsum",
             }}
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -123,7 +123,7 @@ describe("Textarea component", () => {
             name="test"
             errorMessages={[{ code: "required", text: "error" }]}
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -143,11 +143,7 @@ describe("Textarea component", () => {
       {
         path: "",
         Component: () => (
-          <Textarea
-            maxCharacterLimit={5000}
-            name="componentName"
-            label="Test Label"
-          />
+          <Textarea maxLength={5000} name="componentName" label="Test Label" />
         ),
       },
     ]);
@@ -165,11 +161,7 @@ describe("Textarea component", () => {
       {
         path: "",
         Component: () => (
-          <Textarea
-            maxCharacterLimit={5000}
-            name="componentName"
-            label="Test Label"
-          />
+          <Textarea maxLength={5000} name="componentName" label="Test Label" />
         ),
       },
     ]);
@@ -199,7 +191,7 @@ describe("Textarea component", () => {
             name="componentName"
             label="Test Label"
             formId="formId"
-            maxCharacterLimit={maxLength}
+            maxLength={maxLength}
           />
         ),
       },
diff --git a/app/components/userFeedback/FeedbackFormBox.tsx b/app/components/userFeedback/FeedbackFormBox.tsx
index 6a1abbf1e..b85d1e1b5 100644
--- a/app/components/userFeedback/FeedbackFormBox.tsx
+++ b/app/components/userFeedback/FeedbackFormBox.tsx
@@ -76,7 +76,7 @@ export const FeedbackFormBox = ({
           placeholder={feedbackTranslations["placeholder-feedback"]}
           role="status"
           innerRef={textAreaReference}
-          maxCharacterLimit={TEXTAREA_CHAR_LIMIT}
+          maxLength={TEXTAREA_CHAR_LIMIT}
         />
         <ButtonContainer>
           <Button
diff --git a/app/services/cms/components/StrapiTextarea.tsx b/app/services/cms/components/StrapiTextarea.tsx
index 276cb8c94..c504783e3 100644
--- a/app/services/cms/components/StrapiTextarea.tsx
+++ b/app/services/cms/components/StrapiTextarea.tsx
@@ -17,7 +17,7 @@ const StrapiTextareaSchema = z
     label: z.string().nullable(),
     placeholder: z.string().nullable(),
     errors: StrapiErrorRelationSchema,
-    maxCharacterLimit: z.number().default(TEXTAREA_CHAR_LIMIT),
+    maxLength: z.number().nullable(),
   })
   .merge(HasOptionalStrapiIdSchema);
 
@@ -28,9 +28,11 @@ export const StrapiTextareaComponentSchema = StrapiTextareaSchema.extend({
 });
 
 export const StrapiTextarea = ({ errors, ...props }: StrapiTextarea) => {
+  const maxLength = props.maxLength ?? TEXTAREA_CHAR_LIMIT;
   return (
     <Textarea
       {...omitNull(props)}
+      maxLength={maxLength}
       errorMessages={flattenStrapiErrors(errors)}
     />
   );
diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
index 3d2b0b72b..603f3e58b 100644
--- a/stories/Textarea.stories.tsx
+++ b/stories/Textarea.stories.tsx
@@ -21,7 +21,7 @@ export const Default: Story = {
     name: "textarea",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -32,7 +32,7 @@ export const WithDescription: Story = {
     description: "Lorem **ipsum**\n\n* _Lorem ipsum_\n* _Lorem ipsum_",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -46,7 +46,7 @@ export const Withdetails: Story = {
     },
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };

From 2adae841d3f41405b04869a67e8fd138d4c2b4c7 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Tue, 10 Dec 2024 10:10:17 +0100
Subject: [PATCH 3/7] ref: move defaulting into textarea instead of
 strapiTextArea

---
 app/components/inputs/Textarea.tsx               |  5 +++--
 app/components/inputs/__test__/Textarea.test.tsx | 15 +++++----------
 app/services/cms/components/StrapiTextarea.tsx   |  3 ---
 stories/Textarea.stories.tsx                     |  4 ----
 4 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
index 1c3567008..be6850056 100644
--- a/app/components/inputs/Textarea.tsx
+++ b/app/components/inputs/Textarea.tsx
@@ -3,6 +3,7 @@ import type { AriaRole, ReactNode } from "react";
 import { useField } from "remix-validated-form";
 import { Details } from "~/components/Details";
 import InputLabel from "~/components/inputs/InputLabel";
+import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 import { type ErrorMessageProps } from ".";
 import InputError from "./InputError";
 import RichText from "../RichText";
@@ -16,7 +17,7 @@ type TextareaProps = Readonly<{
     content: string;
   };
   placeholder?: string;
-  maxLength: number;
+  maxLength?: number;
   errorMessages?: ErrorMessageProps[];
   formId?: string;
   classNameLabel?: string;
@@ -33,7 +34,7 @@ const Textarea = ({
   label,
   details,
   placeholder,
-  maxLength,
+  maxLength = TEXTAREA_CHAR_LIMIT,
   errorMessages,
   classNameLabel,
   role,
diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index d375a64e4..ef74be14c 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -1,6 +1,7 @@
 import { createRemixStub } from "@remix-run/testing";
 import { render, screen, fireEvent } from "@testing-library/react";
 import Textarea, { TEXT_AREA_ROWS } from "~/components/inputs/Textarea";
+import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 
 const getInputProps = vi.fn();
 let error: string | undefined = undefined;
@@ -27,12 +28,11 @@ afterEach(() => {
 describe("Textarea component", () => {
   it("renders without errors", () => {
     const componentName = "test-textarea";
-    const maxLength = 5000;
 
     getInputProps.mockImplementationOnce(() => ({
       id: componentName,
       placeholder: "Test Placeholder",
-      maxLength: maxLength,
+      maxLength: TEXTAREA_CHAR_LIMIT,
     }));
 
     const RemixStub = createRemixStub([
@@ -41,7 +41,7 @@ describe("Textarea component", () => {
         Component: () => (
           <Textarea
             name={componentName}
-            maxLength={maxLength}
+            maxLength={5000}
             label="Test Label"
             formId="formId"
           />
@@ -61,7 +61,7 @@ describe("Textarea component", () => {
 
     expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
 
-    expect(element).toHaveAttribute("maxLength", maxLength.toString());
+    expect(element).toHaveAttribute("maxLength", "5000");
   });
 
   it("renders without errors when description is provided", () => {
@@ -74,7 +74,6 @@ describe("Textarea component", () => {
             label="Test Label"
             description="Test Description"
             formId="formId"
-            maxLength={5000}
           />
         ),
       },
@@ -102,7 +101,6 @@ describe("Textarea component", () => {
               content: "Lorem ipsum",
             }}
             formId="formId"
-            maxLength={5000}
           />
         ),
       },
@@ -123,7 +121,6 @@ describe("Textarea component", () => {
             name="test"
             errorMessages={[{ code: "required", text: "error" }]}
             formId="formId"
-            maxLength={5000}
           />
         ),
       },
@@ -160,9 +157,7 @@ describe("Textarea component", () => {
     const RemixStub = createRemixStub([
       {
         path: "",
-        Component: () => (
-          <Textarea maxLength={5000} name="componentName" label="Test Label" />
-        ),
+        Component: () => <Textarea name="componentName" label="Test Label" />,
       },
     ]);
 
diff --git a/app/services/cms/components/StrapiTextarea.tsx b/app/services/cms/components/StrapiTextarea.tsx
index c504783e3..f2711e98e 100644
--- a/app/services/cms/components/StrapiTextarea.tsx
+++ b/app/services/cms/components/StrapiTextarea.tsx
@@ -5,7 +5,6 @@ import {
   StrapiErrorRelationSchema,
 } from "~/services/cms/flattenStrapiErrors";
 import { StrapiDetailsSchema } from "~/services/cms/models/StrapiDetails";
-import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 import { omitNull } from "~/util/omitNull";
 import { HasOptionalStrapiIdSchema } from "../models/HasStrapiId";
 
@@ -28,11 +27,9 @@ export const StrapiTextareaComponentSchema = StrapiTextareaSchema.extend({
 });
 
 export const StrapiTextarea = ({ errors, ...props }: StrapiTextarea) => {
-  const maxLength = props.maxLength ?? TEXTAREA_CHAR_LIMIT;
   return (
     <Textarea
       {...omitNull(props)}
-      maxLength={maxLength}
       errorMessages={flattenStrapiErrors(errors)}
     />
   );
diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
index 603f3e58b..4eded22c2 100644
--- a/stories/Textarea.stories.tsx
+++ b/stories/Textarea.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { remixContext } from "../.storybook/remixContext";
 import Textarea from "../app/components/inputs/Textarea";
-import { TEXTAREA_CHAR_LIMIT } from "~/services/validation/inputlimits";
 
 const meta = {
   title: "Component/Textarea",
@@ -21,7 +20,6 @@ export const Default: Story = {
     name: "textarea",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -32,7 +30,6 @@ export const WithDescription: Story = {
     description: "Lorem **ipsum**\n\n* _Lorem ipsum_\n* _Lorem ipsum_",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -46,7 +43,6 @@ export const Withdetails: Story = {
     },
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };

From a5b370bd27734f2b572f342d84c21a4400f97467 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Tue, 10 Dec 2024 15:11:47 +0100
Subject: [PATCH 4/7] add test defaulting to TEXTAREA_CHAR_LENGTH and to manuel
 limit

---
 .../inputs/__test__/Textarea.test.tsx         | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index ef74be14c..0dcbd23a8 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -32,25 +32,25 @@ describe("Textarea component", () => {
     getInputProps.mockImplementationOnce(() => ({
       id: componentName,
       placeholder: "Test Placeholder",
-      maxLength: TEXTAREA_CHAR_LIMIT,
     }));
 
     const RemixStub = createRemixStub([
       {
         path: "",
         Component: () => (
-          <Textarea
-            name={componentName}
-            maxLength={5000}
-            label="Test Label"
-            formId="formId"
-          />
+          <Textarea name={componentName} label="Test Label" formId="formId" />
         ),
       },
     ]);
 
     render(<RemixStub />);
 
+    expect(getInputProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        maxLength: TEXTAREA_CHAR_LIMIT,
+      }),
+    );
+
     const element = screen.getByRole("textbox");
     const elementByLabel = screen.getByLabelText("Test Label");
     expect(element).toBeInTheDocument();
@@ -60,8 +60,6 @@ describe("Textarea component", () => {
     expect(elementByLabel).not.toHaveClass("ds-heading-03-reg");
 
     expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
-
-    expect(element).toHaveAttribute("maxLength", "5000");
   });
 
   it("renders without errors when description is provided", () => {
@@ -139,9 +137,7 @@ describe("Textarea component", () => {
     const RemixStub = createRemixStub([
       {
         path: "",
-        Component: () => (
-          <Textarea maxLength={5000} name="componentName" label="Test Label" />
-        ),
+        Component: () => <Textarea name="componentName" label="Test Label" />,
       },
     ]);
 
@@ -168,7 +164,7 @@ describe("Textarea component", () => {
     expect(textarea.getAttribute("rows")).toEqual(TEXT_AREA_ROWS.toString());
   });
 
-  it("should enforce maxCharacterLength limit", () => {
+  it("should set the maxLength and enforce it", () => {
     const maxLength = 10;
     getInputProps.mockImplementationOnce(() => ({
       id: "componentName",
@@ -200,6 +196,11 @@ describe("Textarea component", () => {
       target: { value: "This is a very long text" },
     });
 
+    expect(getInputProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        maxLength: maxLength,
+      }),
+    );
     expect(textarea.value.length).toEqual(maxLength);
     expect(textarea.value).toEqual("This is a ");
   });

From 0b33234ce911b88f9081add860a62ac1eb9c3ca4 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Tue, 10 Dec 2024 15:22:38 +0100
Subject: [PATCH 5/7] remove test for setting the max length cause its a
 browser behaviour and shouldnt be test

---
 app/components/inputs/__test__/Textarea.test.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index 0dcbd23a8..84fb5a9a3 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -164,14 +164,11 @@ describe("Textarea component", () => {
     expect(textarea.getAttribute("rows")).toEqual(TEXT_AREA_ROWS.toString());
   });
 
-  it("should set the maxLength and enforce it", () => {
+  it("should set the maxLength", () => {
     const maxLength = 10;
     getInputProps.mockImplementationOnce(() => ({
       id: "componentName",
       maxLength: maxLength,
-      onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        e.target.value = e.target.value.slice(0, maxLength);
-      },
     }));
 
     const RemixStub = createRemixStub([
@@ -190,18 +187,10 @@ describe("Textarea component", () => {
 
     render(<RemixStub />);
 
-    const textarea = screen.getByRole<HTMLTextAreaElement>("textbox");
-
-    fireEvent.change(textarea, {
-      target: { value: "This is a very long text" },
-    });
-
     expect(getInputProps).toHaveBeenCalledWith(
       expect.objectContaining({
         maxLength: maxLength,
       }),
     );
-    expect(textarea.value.length).toEqual(maxLength);
-    expect(textarea.value).toEqual("This is a ");
   });
 });

From 8782bec3abf9aa75afe342bbec556ad2f16bed35 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Tue, 10 Dec 2024 15:26:15 +0100
Subject: [PATCH 6/7] remove maxLength from FeedBackFormBox cause its default

---
 app/components/userFeedback/FeedbackFormBox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/userFeedback/FeedbackFormBox.tsx b/app/components/userFeedback/FeedbackFormBox.tsx
index b85d1e1b5..8abfb9d47 100644
--- a/app/components/userFeedback/FeedbackFormBox.tsx
+++ b/app/components/userFeedback/FeedbackFormBox.tsx
@@ -76,7 +76,6 @@ export const FeedbackFormBox = ({
           placeholder={feedbackTranslations["placeholder-feedback"]}
           role="status"
           innerRef={textAreaReference}
-          maxLength={TEXTAREA_CHAR_LIMIT}
         />
         <ButtonContainer>
           <Button

From 12ccd76cbc656959ffd1adfa6bebfae5abd9ca75 Mon Sep 17 00:00:00 2001
From: Flo Drews <florian.drews@digitalservice.bund.de>
Date: Tue, 10 Dec 2024 17:36:07 +0100
Subject: [PATCH 7/7] put maxLength out of initialInputProps and passed it as
 an props

---
 app/components/inputs/Textarea.tsx              |  2 +-
 .../inputs/__test__/Textarea.test.tsx           | 17 +++++------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
index be6850056..e85389382 100644
--- a/app/components/inputs/Textarea.tsx
+++ b/app/components/inputs/Textarea.tsx
@@ -62,8 +62,8 @@ const Textarea = ({
         {...getInputProps({
           id: name,
           placeholder,
-          maxLength,
         })}
+        maxLength={maxLength}
         rows={TEXT_AREA_ROWS}
         className={classNames(
           "ds-textarea forced-color-adjust-none placeholder-gray-600",
diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
index 84fb5a9a3..6dbd37858 100644
--- a/app/components/inputs/__test__/Textarea.test.tsx
+++ b/app/components/inputs/__test__/Textarea.test.tsx
@@ -45,12 +45,6 @@ describe("Textarea component", () => {
 
     render(<RemixStub />);
 
-    expect(getInputProps).toHaveBeenCalledWith(
-      expect.objectContaining({
-        maxLength: TEXTAREA_CHAR_LIMIT,
-      }),
-    );
-
     const element = screen.getByRole("textbox");
     const elementByLabel = screen.getByLabelText("Test Label");
     expect(element).toBeInTheDocument();
@@ -60,6 +54,9 @@ describe("Textarea component", () => {
     expect(elementByLabel).not.toHaveClass("ds-heading-03-reg");
 
     expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+    expect(element.getAttribute("maxLength")).toBe(
+      TEXTAREA_CHAR_LIMIT.toString(),
+    );
   });
 
   it("renders without errors when description is provided", () => {
@@ -168,7 +165,6 @@ describe("Textarea component", () => {
     const maxLength = 10;
     getInputProps.mockImplementationOnce(() => ({
       id: "componentName",
-      maxLength: maxLength,
     }));
 
     const RemixStub = createRemixStub([
@@ -186,11 +182,8 @@ describe("Textarea component", () => {
     ]);
 
     render(<RemixStub />);
+    const textarea = screen.getByRole("textbox");
 
-    expect(getInputProps).toHaveBeenCalledWith(
-      expect.objectContaining({
-        maxLength: maxLength,
-      }),
-    );
+    expect(textarea.getAttribute("maxLength")).toBe(maxLength.toString());
   });
 });