How to control select mutltiple (v1)?

[EmilEinarsen]

I want to control a hidden select. The following implementation works but isn't allowed by the library's types.
Here's the issues:

1. The infered type for "multi" of "defaultValue" is allowed to be a stirng while the type of "multi2" is required to be an array.
2. The type of the parameter of useInputControl doesn't allow FieldName to be an array.

useInputControl is probably only meant to be used with inputs, but is there a way of accomplishing what I want?

(I would like to deal with most of the edge-cases internally in the field to avoid preprocessing & transforms in every formSchema)

const formSchema = z.object({
	multi: z
		.array(z.string())
		.optional()
	multi2: z.array(z.string()).nonempty(),
})

export default function Component() {

	const [form, fields] = useForm({
		defaultValue: {
			multi: options[0].value, //  Allowed to be a string
			multi2: [options[1].value], //  Not allowed to be a string
		},
		constraint: getZodConstraint(formSchema),
		/*...*/
	})

	return /*...*/
}

export interface MultiSelectFieldProps
	extends Pick<MultiSelectProps, 'options'> {
	name: FieldName<string[]>
	label: string
	placeholder?: string
	description?: string
	initialOptions?: ComboboxProps['options']
	disabled?: boolean
	className?: string
}

export function MultiSelectField({
	name,
	label,
	options,
	initialOptions,
	placeholder,
	description,
	disabled,
	className,
}: MultiSelectFieldProps) {
	const [meta] = useField(name)
	const control = useInputControl(meta) // not allowed to be (string | undefined)[]

	const values =
		Array.isArray(control.value) ?
			control.value
		:	control.value?.split(',').filter(Boolean)

	const actualOptions = options || initialOptions || []
	const selected = actualOptions?.filter(
		option => values?.includes(option.value),
	)

	const shadowDomSelectorProps = getSelectProps(meta)
	delete shadowDomSelectorProps.defaultValue

	return (
		<div className={className}>
			<Label htmlFor={meta.id}>
				{label}
				{meta.constraint?.required && <span aria-hidden>*</span>}
			</Label>
			<select
				value={values}
				onChange={() => {}}
				{...shadowDomSelectorProps}
				hidden
			>
				{actualOptions.map(option => (
					<option key={option.value} value={option.value}>
						{option.label}
					</option>
				))}
			</select>
			<MultiSelect
				value={selected}
				onValueChange={selectedOptions => {
					control.change(selectedOptions.map(opt => opt.value)) // string[] not assignable
				}}
				onOpenChange={open => {
					if (!open) control.blur()
				}}
				placeholder={placeholder}
				options={actualOptions}
				disabled={disabled}
				className="mt-1 flex w-full font-normal text-foreground hover:bg-background"
			/>
			{description && (
				<p className="pt-1 text-sm text-muted-foreground">{description}</p>
			)}
			<div className="min-h-[32px] pb-2 pt-1">
				{!meta.valid ?
					<ErrorList id={meta.errorId} errors={meta.errors} />
				:	null}
			</div>
		</div>
	)
}

[edmundhung]

I think it is fair to expect useInputControl to work with multiple select here. What you are doing in the example make sense to me. I guess we just need to tweak the implementation so that it works with multi <select /> properly when it receives an array with control.change.

I am not sure if I can get this updated before the v1 release but I will prioritize this whenever possible. Feel free to take a stab on it and create a PR. :)

[EmilEinarsen]

Thanks for the quick answer. I'm happy contribute with the update. I'll give it a go as soon as I'm done migrating to v1 :)

[zachrip]

@edmundhung Is there any update around this? I have a combobox component I'm trying to use with conform, it expects and emits onchange with an array. For now I'm just using a comma delimited string in the value but I'd prefer not to.

[edmundhung]

You can find an example using the unstable_useControl hook here. This hook is not documented except on the release note. (😅 it will be documented very soon). The only difference compares to useInputControl is the fact that it doesn't try to render an input element for you and so you will need to register the input manually through control.register. If you remove that, useControl should be interchangable with useInputControl in the example.

[penx]

I see in the release notes there is an example for a single control with a single value (ListBox), with a select as a fallback, and for multiple controls each with a single value (checkbox list), referencing the ref of each rendered checkbox.

I don't see how it would be used for a single control with multiple values, e.g. for a <select multiple> as mentioned above.

Our use case is a <Form> with a button that opens a <Modal> allowing the user to select a set of values, the change event happens when they hit 'Save' in the modal, but not if they hit 'Cancel'. I am not sure using multiple Controls with render props will help as we only have a single control (the modal button trigger), so I guess I would need a several useControl inside <Form> and call onChange for each inside <Modal>.

[penx]

Sorry got it now, it's the first example in the release notes but using <select multiple> as the hidden fallback

[penx]

I am wondering if it would be possible to use useControl for structured data, i.e. objects rather than arrays. I guess not as I think conform/useControl relies on there being a single html fallback element per Control?

[edmundhung]

Conform utilize the FormData API heavily. What useInputControl / useControl do at the end is to help you sync the value and different events of you custom input to a real input element so Conform could understand it just like any native inputs.

The useInputControl does one step more by rendering the input element for you with a limitation on conditional rendering. That's why I will deprecate useInputControl in favor of useControl once I am confident with the API.

I am wondering if it would be possible to use useControl for structured data, i.e. objects rather than arrays.

Sending structured data (object or even array of object) is usually a bad practice. A lot of the cases are sending the whole object from the database which can actually be replaced with an id / a list of ids. It is also unsafe to trust the client and assumes that the object matches what you already had in the DB.