Example request: headless-ui combobox with multiple and initialValue

[sys13]

Thanks for the great work on v1.0! Looking to integrate with the Combobox from headless-ui. I see the example on link. Looking for an example with mutiple, and an initialValue. Happy to co-work on it with anyone.

[EmilEinarsen]

Maybe this example will be helpful despite being radix-ui and not headless-ui.
There's a lot of ways to do this, but this approached worked best for me

export interface MultiSelectFieldProps<Name = FieldName<string | string[]>>
	extends Pick<MultiSelectProps, 'options'> {
	name: Name
	label: string
	placeholder?: string
	disabled?: boolean
	className?: string
	onValueChange?: MultiSelectProps['onValueChange']
}

export function MultiSelectField({
	name,
	label,
	options,
	className,
	onValueChange,
	...props
}: MultiSelectFieldProps) {
	const [meta, form] = useField(name)

	const value =
		typeof meta.value === 'string' ?
			[meta.value]
		:	meta.value?.filter(Boolean) ?? []

	const defaultSelected = options?.filter(option =>
		value.includes(option.value),
	)

	const shadowSelectProps = {
		...getSelectProps(meta),
		defaultValue: undefined,
		value: value,
		onChange: () => {},
	}

	return (
		<div className={className}>
			<Label htmlFor={meta.id}>
				{label}
				{meta.constraint?.required && <span aria-hidden>*</span>}
			</Label>
			<select {...shadowSelectProps} hidden>
				{value.map(v => (
					<option key={v} value={v} />
				))}
			</select>
			<MultiSelect
				defaultValue={defaultSelected}
				onValueChange={selectedOptions => {
					form.update({
						name: meta.name,
						value: selectedOptions.map(opt => opt.value),
					})
					onValueChange?.(selectedOptions)
				}}
				options={actualOptions}
				{...props}
			/>
		</div>
	)
}