fix: Linode Create v2 - UDFs (#10507)

* fix multiselect

* fixes

* hide placeholder text when options are selected @hana-linode

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx

@@ -57,18 +57,26 @@ 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,
         }}
         errorText={error}
         label={userDefinedField.label}
         multiple
         noMarginTop
-        onChange={(e, options) => field.onChange(options.join(','))}
         options={options}
-        value={field.value?.split(',') ?? []}
+        // If options are selected, hide the placeholder
+        placeholder={value.length > 0 ? ' ' : undefined}
+        value={value}
       />
     );
   }
@@ -78,6 +86,8 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
       .oneof!.split(',')
       .map((option) => ({ label: option }));
 
+    const value = options.find((option) => option.label === field.value);
+
     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}
         />
       );
     }