From 32d29c7ff6d61538514bbd6ab794008d4c54d1bd Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 22 May 2024 15:20:49 -0400
Subject: [PATCH 1/3] fix multiselect

---
 .../UserDefinedFieldInput.tsx                 | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
index 4e8c63e0ac5..bd03c64c636 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
@@ -35,7 +35,7 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
 
   const { field } = useController<CreateLinodeRequest>({
     control,
-    name: `stackscript_data.${userDefinedField.name}`,
+    name: `stackscript_data.${userDefinedField.name}` as const,
   });
 
   const error = formState.errors?.[userDefinedField.name]?.message?.replace(
@@ -57,8 +57,15 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
       .manyof!.split(',')
       .map((option) => ({ label: option }));
 
+    const value = options.filter((option) =>
+      field.value?.split(',').includes(option.label)
+    );
+
     return (
       <Autocomplete
+        onChange={(e, options) => {
+          field.onChange(options.map((option) => option.label).join(','));
+        }}
         textFieldProps={{
           required: isRequired,
         }}
@@ -66,9 +73,8 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
         label={userDefinedField.label}
         multiple
         noMarginTop
-        onChange={(e, options) => field.onChange(options.join(','))}
         options={options}
-        value={field.value?.split(',') ?? []}
+        value={value}
       />
     );
   }
@@ -78,6 +84,10 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
       .oneof!.split(',')
       .map((option) => ({ label: option }));
 
+    const value = options.find((option) => option.label === field.value) ?? {
+      label: userDefinedField.default ?? '',
+    };
+
     if (options.length > 4) {
       return (
         <Autocomplete
@@ -86,9 +96,9 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
           }}
           disableClearable
           label={userDefinedField.label}
-          onChange={(_, option) => field.onChange(option.label)}
+          onChange={(_, option) => field.onChange(option?.label ?? '')}
           options={options}
-          value={options.find((option) => option.label === field.value)}
+          value={value}
         />
       );
     }

From 59a539bcd81e7c73ea36b1296be384fe43148ef0 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Wed, 22 May 2024 15:31:39 -0400
Subject: [PATCH 2/3] fixes

---
 .../UserDefinedFields/UserDefinedFieldInput.tsx             | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
index bd03c64c636..c5259f07ba0 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
@@ -35,7 +35,7 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
 
   const { field } = useController<CreateLinodeRequest>({
     control,
-    name: `stackscript_data.${userDefinedField.name}` as const,
+    name: `stackscript_data.${userDefinedField.name}`,
   });
 
   const error = formState.errors?.[userDefinedField.name]?.message?.replace(
@@ -84,9 +84,7 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
       .oneof!.split(',')
       .map((option) => ({ label: option }));
 
-    const value = options.find((option) => option.label === field.value) ?? {
-      label: userDefinedField.default ?? '',
-    };
+    const value = options.find((option) => option.label === field.value);
 
     if (options.length > 4) {
       return (

From 9ceba42f2184885e578da338533040ef9b00493d Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 23 May 2024 11:52:49 -0400
Subject: [PATCH 3/3] hide placeholder text when options are selected
 @hana-linode

---
 .../StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
index c5259f07ba0..1dc9dc84a1b 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
@@ -74,6 +74,8 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
         multiple
         noMarginTop
         options={options}
+        // If options are selected, hide the placeholder
+        placeholder={value.length > 0 ? ' ' : undefined}
         value={value}
       />
     );