From fc5565ec086bda32525ce661f64f4f636801c028 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 12 Sep 2023 11:58:07 +0200
Subject: [PATCH] add stringify to MultiLineInput (#23086)

fixes: #22937
---
 .../dynamic/MultivaluedListComponent.tsx      | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx b/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
index f7053005f9..fd4bd9fcab 100644
--- a/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
@@ -12,6 +12,14 @@ import { HelpItem } from "ui-shared";
 import type { ComponentProps } from "./components";
 import { convertToName } from "./DynamicComponents";
 
+function stringToMultiline(value?: string): string[] {
+  return typeof value === "string" && value.length > 0 ? value.split("##") : [];
+}
+
+function toStringValue(formValue: string[]): string {
+  return formValue.join("##");
+}
+
 export const MultiValuedListComponent = ({
   name,
   label,
@@ -19,6 +27,7 @@ export const MultiValuedListComponent = ({
   defaultValue,
   options,
   isDisabled = false,
+  stringify,
 }: ComponentProps) => {
   const { t } = useTranslation();
   const { control } = useFormContext();
@@ -49,20 +58,25 @@ export const MultiValuedListComponent = ({
             variant={SelectVariant.typeaheadMulti}
             typeAheadAriaLabel="Select"
             onToggle={(isOpen) => setOpen(isOpen)}
-            selections={field.value}
+            selections={
+              stringify ? stringToMultiline(field.value) : field.value
+            }
             onSelect={(_, v) => {
               const option = v.toString();
-              if (field.value.includes(option)) {
-                field.onChange(
-                  field.value.filter((item: string) => item !== option),
-                );
+              const values = stringify
+                ? stringToMultiline(field.value)
+                : field.value;
+              let newValue;
+              if (values.includes(option)) {
+                newValue = values.filter((item: string) => item !== option);
               } else {
-                field.onChange([...field.value, option]);
+                newValue = [...values, option];
               }
+              field.onChange(stringify ? toStringValue(newValue) : newValue);
             }}
             onClear={(event) => {
               event.stopPropagation();
-              field.onChange([]);
+              field.onChange(stringify ? "" : []);
             }}
             isOpen={open}
             aria-label={t(label!)}