feat(textarea): add maxlength via strapi defaulting to 5000 (#1534)

* feat(textarea): add possibility to set max char length

* ref(textarea): renaming to natural name maxLength

* ref: move defaulting into textarea instead of strapiTextArea

* add test defaulting to TEXTAREA_CHAR_LENGTH and to manuel limit

* remove test for setting the max length cause its a browser behaviour and shouldnt be test

* remove maxLength from FeedBackFormBox cause its default

* put maxLength out of initialInputProps and passed it as an props

app/components/inputs/Textarea.tsx

@@ -17,6 +17,7 @@ type TextareaProps = Readonly<{
     content: string;
   };
   placeholder?: string;
+  maxLength?: number;
   errorMessages?: ErrorMessageProps[];
   formId?: string;
   classNameLabel?: string;
@@ -33,6 +34,7 @@ const Textarea = ({
   label,
   details,
   placeholder,
+  maxLength = TEXTAREA_CHAR_LIMIT,
   errorMessages,
   classNameLabel,
   role,
@@ -60,8 +62,8 @@ const Textarea = ({
         {...getInputProps({
           id: name,
           placeholder,
-          maxLength: TEXTAREA_CHAR_LIMIT,
         })}
+        maxLength={maxLength}
         rows={TEXT_AREA_ROWS}
         className={classNames(
           "ds-textarea forced-color-adjust-none placeholder-gray-600",

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,10 +28,12 @@ afterEach(() => {
 describe("Textarea component", () => {
   it("renders without errors", () => {
     const componentName = "test-textarea";
+
     getInputProps.mockImplementationOnce(() => ({
       id: componentName,
       placeholder: "Test Placeholder",
     }));
+
     const RemixStub = createRemixStub([
       {
         path: "",
@@ -51,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", () => {
@@ -154,4 +160,30 @@ describe("Textarea component", () => {
 
     expect(textarea.getAttribute("rows")).toEqual(TEXT_AREA_ROWS.toString());
   });
+
+  it("should set the maxLength", () => {
+    const maxLength = 10;
+    getInputProps.mockImplementationOnce(() => ({
+      id: "componentName",
+    }));
+
+    const RemixStub = createRemixStub([
+      {
+        path: "",
+        Component: () => (
+          <Textarea
+            name="componentName"
+            label="Test Label"
+            formId="formId"
+            maxLength={maxLength}
+          />
+        ),
+      },
+    ]);
+
+    render(<RemixStub />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea.getAttribute("maxLength")).toBe(maxLength.toString());
+  });
 });

app/services/cms/components/StrapiTextarea.tsx

@@ -16,6 +16,7 @@ const StrapiTextareaSchema = z
     label: z.string().nullable(),
     placeholder: z.string().nullable(),
     errors: StrapiErrorRelationSchema,
+    maxLength: z.number().nullable(),
   })
   .merge(HasOptionalStrapiIdSchema);
 
@@ -25,6 +26,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)}
+    />
+  );
+};