[Feature]: Single input with value as array

[cjoecker]

What is the new or updated feature that you are suggesting?

For inputs like a multi-select, I would like to be able to be able to handle the value as a stringified array

I have for example a single input called options.
That input saves its value as 1,2,3 if I select the options 1,2,3
It would be nice if the library can understand that value as an array and not a string.

Why should this feature be included?

I couldn't find in the documentation a good way to handle array values from a single input.
Creating hidden inputs for every single selected value is not that elegant in my opinion.

Here you have a code sandbox where you can reproduce what I mean:
https://codesandbox.io/p/sandbox/gifted-mirzakhani-799ysl

[airjp73]

I could see support for this being included in the form of a helper for zod-form-data, but there isn't much we can do in remix-validated-form itself.

In general, the recommended approach for this type of thing is to transform the data in your validator. Since you're using zod, you can do it like this:

options: z.string().transform(val => val.split(','))

If you want to validate something like the number of options selected, you can also pipe it to another validator. You might also need to handle the empty string case (not familiar with MUI so not sure if it's necessary).

options: z.string()
  .transform(val => val === "" ? [] : val.split(','))
  .pipe(
    z.array(z.string()).min(1, "Must choose at least one")
  )

If we added a helper to zod-form-data, we could simplify the process a bit.

options: zfd.commaSeparated(
  z.array(z.string()).min(1, "Must choose at least one")
)

[jamalsoueidan]

I think this issue is related to MUI how they handle it, because in react-select it works out of the box when used with remix-validated-form, correct me if im wrong.

[cjoecker]

@airjp73 I like the idea of the helper. Having arrays as a string is something common. It can then be added to the arrays of documentation 👏

[silas]

If you want to validate something like the number of options selected, you can also pipe it to another validator. You might also need to handle the empty string case (not familiar with MUI so not sure if it's necessary).

options: z.string()
  .transform(val => val === "" ? [] : val.split(','))
  .pipe(
    z.array(z.string()).min(1, "Must choose at least one")
  )

@airjp73 Doesn't this generate a ZodIssue with a path that won't map back to the original field though (e.g. path: ["options", 0] vs original path: ["options"])?