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..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 @@ -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 ( { + field.onChange(options.map((option) => option.label).join(',')); + }} textFieldProps={{ required: isRequired, }} @@ -66,9 +73,10 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => { 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 ( { }} 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} /> ); }