From bdf57e932af2bd899ee1ce3083156193e75a742a Mon Sep 17 00:00:00 2001
From: Mateusz Borowczyk <mateusz.borowczyk@inmanta.com>
Date: Tue, 14 May 2024 15:57:30 +0200
Subject: [PATCH] Fix TextArea

---
 changelogs/unreleased/5748-textarea-fix.yml   |  6 +++
 src/Test/Data/Field.ts                        | 12 +++++
 .../Components/TextFormInput.tsx              |  4 +-
 .../ServiceInstanceForm.test.tsx              | 49 +++++++++++++++++++
 4 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/5748-textarea-fix.yml

diff --git a/changelogs/unreleased/5748-textarea-fix.yml b/changelogs/unreleased/5748-textarea-fix.yml
new file mode 100644
index 000000000..d5a0ceede
--- /dev/null
+++ b/changelogs/unreleased/5748-textarea-fix.yml
@@ -0,0 +1,6 @@
+description: "Fix issue with updating textarea fields"
+issue-nr: 5748
+change-type: patch
+destination-branches: [master, iso7]
+sections:
+  bugfix: "{{description}}"
diff --git a/src/Test/Data/Field.ts b/src/Test/Data/Field.ts
index 16ebb5752..fdfce7995 100644
--- a/src/Test/Data/Field.ts
+++ b/src/Test/Data/Field.ts
@@ -6,8 +6,20 @@ import {
   TextField,
   BooleanField,
   EnumField,
+  Textarea,
 } from "@/Core";
 
+export const textArea: Textarea = {
+  kind: "Textarea",
+  name: "textarea_field",
+  description: "description",
+  isOptional: true,
+  isDisabled: false,
+  defaultValue: "",
+  inputType: TextInputTypes.text,
+  type: "string",
+};
+
 export const text: TextField = {
   kind: "Text",
   name: "text_field",
diff --git a/src/UI/Components/ServiceInstanceForm/Components/TextFormInput.tsx b/src/UI/Components/ServiceInstanceForm/Components/TextFormInput.tsx
index 0b4581c7d..ab2a10cf5 100644
--- a/src/UI/Components/ServiceInstanceForm/Components/TextFormInput.tsx
+++ b/src/UI/Components/ServiceInstanceForm/Components/TextFormInput.tsx
@@ -103,8 +103,8 @@ export const TextFormInput: React.FC<Props> = ({
     >
       {isTextarea ? (
         <TextArea
-          value={attributeValue || ""}
-          onChange={(event, value) => handleInputChange(value, event)}
+          value={inputValue || ""}
+          onChange={(_event, value) => handleChange(value)}
           id={attributeName}
           name={attributeName}
           placeholder={placeholder}
diff --git a/src/UI/Components/ServiceInstanceForm/ServiceInstanceForm.test.tsx b/src/UI/Components/ServiceInstanceForm/ServiceInstanceForm.test.tsx
index 6c1c4b6d6..8962f4770 100644
--- a/src/UI/Components/ServiceInstanceForm/ServiceInstanceForm.test.tsx
+++ b/src/UI/Components/ServiceInstanceForm/ServiceInstanceForm.test.tsx
@@ -14,6 +14,7 @@ import {
   InstanceAttributeModel,
   NestedField,
   TextField,
+  Textarea,
 } from "@/Core";
 import {
   getStoreInstance,
@@ -35,6 +36,7 @@ const setup = (
     | NestedField
     | DictListField
     | EnumField
+    | Textarea
   )[],
   func: undefined | jest.Mock = undefined,
   isEdit = false,
@@ -537,3 +539,50 @@ test("GIVEN ServiceInstanceForm WHEN clicking the submit button THEN callback is
     expect.any(Function),
   );
 });
+
+test.only.each`
+  input                  | label                             | newValue
+  ${Test.Field.textArea} | ${"TextareaInput-textarea_field"} | ${"new text"}
+  ${Test.Field.text}     | ${"TextInput-text_field"}         | ${"new text"}
+`(
+  "Given ServiceInstanceForm and InputField WHEN updating the input THEN current value is correctly displayed",
+  async ({ input, label, newValue }) => {
+    const { component } = setup([input], undefined, false, undefined);
+    render(component);
+
+    expect(screen.getByLabelText(label)).toHaveValue("");
+
+    await act(async () => {
+      await userEvent.type(screen.getByLabelText(label), newValue);
+    });
+
+    expect(screen.getByLabelText(label)).toHaveValue(newValue);
+  },
+);
+
+test.each`
+  input                  | label                             | value          | newValue
+  ${Test.Field.textArea} | ${"TextareaInput-textarea_field"} | ${"test text"} | ${"new text"}
+  ${Test.Field.text}     | ${"TextInput-text_field"}         | ${"test text"} | ${"new text"}
+`(
+  "Given ServiceInstanceForm and InputField WHEN updating the input THEN current value is correctly displayed",
+  async ({ input, label, value, newValue }) => {
+    const originalAttributes = {
+      [input.name]: value,
+    };
+    const { component } = setup([input], undefined, false, originalAttributes);
+    render(component);
+
+    expect(screen.getByLabelText(label)).toHaveValue(value);
+
+    await act(async () => {
+      await userEvent.clear(screen.getByLabelText(label));
+      await userEvent.type(
+        screen.getByLabelText(label),
+        "{selectAll}{backspace}" + newValue,
+      );
+    });
+
+    expect(screen.getByLabelText(label)).toHaveValue(newValue);
+  },
+);