Value as strings array

[AnsBdran]

Help me figure out why the value of the Multiselct becomes one string instead of strings array:

the form:

const CollectionForm = ({ tags }: Props) => {
  const { getErrorMessage } = useFormErrorMessage();
  const t = useTranslations('form');
  const [lastResult, formAction] = useActionState(action, {});
  const [form, fields] = useForm<CollectionSchemaType>({
    lastResult,
  });

  return (
    <form action={formAction} noValidate id={form.id}>
      <Stack gap={consts.FORM_STACK_GAP}>
        <TextInput
          label={t('fields.labels.collectionName')}
          description={t('fields.descriptions.collectionDescription')}
          error={getErrorMessage({
            msg: fields.title.errors,
            label: 'collectionName',
          })}
          name={fields.title.name}
          required
          defaultValue={fields.title.initialValue}
        />
        <MultiSelect
          label={t('fields.labels.tags')}
          data={tags.map((tag) => tag.name)}
          error={getErrorMessage({
            msg: fields.tags.errors,
            value: 'minimumTags',
          })}
          name={fields.tags.name}
        />
        <SubmitBtn label='create' />
      </Stack>
    </form>
  );
};

export default CollectionForm;

the schema:

import { FORM_FIELDS_NUMBERS, formErrors } from '@/config/consts';
import { z } from 'zod';

export const collectionSchema = z.object({
  title: z
    .string({ required_error: formErrors.REQUIRED })
    .trim()
    .min(4, formErrors.minFieldChars),
  description: z
    .string({ required_error: formErrors.REQUIRED })
    .trim()
    .min(1, formErrors.minFieldChars),
  parentId: z.string().min(1).optional(),
  extraFields: z
    .array(
      z.object({
        label: z
          .string({ required_error: formErrors.REQUIRED })
          .trim()
          .min(1, formErrors.minFieldChars),
        type: z.enum(['DATE', 'FILE', 'NUMBER', 'STRING'], {
          required_error: formErrors.REQUIRED,
        }),
      })
    )
    .default([
      { label: '', type: 'STRING' },
      { label: '', type: 'FILE' },
    ])
    .optional(),
  tags: z
    .array(z.string().trim())
    .min(FORM_FIELDS_NUMBERS.minimumTags, formErrors.minItemsRequired),
});

export type CollectionSchemaType = z.infer<typeof collectionSchema>;

the action:

'use server';
import prisma from '@/lib/prisma';
import { collectionSchema } from '@/lib/schema/collection';
import { parseWithZod } from '@conform-to/zod';
import { redirect } from 'next/navigation';

export const action = async (_: unknown, fd: FormData) => {
  const submission = parseWithZod(fd, {
    schema: collectionSchema,
  });
  console.log({
    submission,
    things: JSON.stringify(submission.payload, null, 2),
  });
  if (submission.status !== 'success') {
    console.log('submission failed.', submission.error, submission.payload);
    return submission.reply({
      resetForm: false,
    });
  }

  console.log(submission.value.tags, '+++++++++++++++++++++++++++++++++++++');

  const { description, title, parentId } = submission.value;

  await prisma.collection.create({
    data: {
      title,
      description,
      parentId: parentId ?? null,
    },
  });
  // redirect('/dashboard');
};

[AnsBdran]

it should be like ['one', 'two', 'three']
but it becomes 'one,two,three'

[AnsBdran]

if I put onChange handler on the MultiSelect to console log the value it outputs an array

[AnsBdran]

Even I make it a controlled input the problem isn't solved.
@edmundhung

[edmundhung]

Keep in mind Conform does not manage the form value but the DOM does (i.e FormData). So if you see the value in a different format, it's likely something wrong on the input element that actually get rendered. In your case, I suspect that mantine is rendering an input with the array value concatenated. You should be able to verify it by inspecting the element value on the browser, or check the FormData value you received.

To fix it, there are two solutions:

• Do not provide a name to the mantine select component. Create your own multi select element with the value of your array. You can find examples from radix-ui / shadcn-ui in the examples directory here.
• If you are using schema library like zod, you can always add a preprocess step that split the text back to an array.