Conform with Shadcn/ui Combobox

[martialanouman]

Hi there!

I created an implementation for Shadcn Combobox with conform but i got an issue when setting it the default value. Conform does not seem to detect it and trigger and error when i try to submit the form.

Here is the component code:

import {
	unstable_useControl as useControl,
	type FieldMetadata,
} from '@conform-to/react'
import { RiCheckLine, RiExpandUpDownLine } from '@remixicon/react'
import { useRef, useState, type ElementRef } from 'react'
import { Button } from '~/components/ui/button'
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
} from '~/components/ui/command'
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from '~/components/ui/popover'
import { cn } from '~/utils/cn'
import { FieldError } from './field-error'

interface Props {
	items: { label: string; value: string }[]
	meta: FieldMetadata<string>
	placeholder: string
	searchPlaceholder: string
	disabled?: boolean
	popoverClassName?: string
}

export function ComboboxField({
	placeholder,
	items,
	meta,
	searchPlaceholder,
	disabled,
	popoverClassName,
}: Readonly<Props>) {
	const [open, setOpen] = useState(false)
	const control = useControl(meta)
	const buttonRef = useRef<ElementRef<typeof Button>>(null)

	return (
		<>
			<select
				ref={control.register}
				name={meta.name}
				aria-hidden
				tabIndex={-1}
				className='sr-only'
				defaultValue={meta.initialValue ?? ''}
				onFocus={() => buttonRef.current?.focus()}
			>
				<option value='' />
				{items.map(option => (
					<option key={option.value} value={option.value} />
				))}
			</select>
			<Popover open={open} onOpenChange={setOpen}>
				<PopoverTrigger asChild>
					<Button
						variant='outline'
						role='combobox'
						aria-expanded={open}
						className='justify-between w-full px-3'
						id={meta.id}
						disabled={disabled}
						ref={buttonRef}
					>
						{control.value
							? items.find(i => i.value === control.value)?.label
							: placeholder}
						<RiExpandUpDownLine
							className='ml-2 shrink-0 opacity-50'
							size={16}
						/>
					</Button>
				</PopoverTrigger>
				<PopoverContent className={cn('p-0 w-[16rem]', popoverClassName)}>
					<Command>
						<CommandInput placeholder={searchPlaceholder} />
						<CommandEmpty>Aucun élément.</CommandEmpty>
						<CommandGroup>
							{items.map(i => (
								<CommandItem
									key={i.value}
									value={i.value}
									onSelect={value => {
										control.change(value === control.value ? '' : value)
                                                                                   setOpen(false)
										control.blur()
									}}
								>
									<RiCheckLine
										className={cn(
											'mr-2',
											control.value === i.value ? 'opacity-100' : 'opacity-0',
										)}
										size={16}
									/>
									{i.label}
								</CommandItem>
							))}
						</CommandGroup>
					</Command>
				</PopoverContent>
			</Popover>
			<FieldError meta={meta} />
		</>
	)
}

i probably did not connect everything properly but i just can't get what.

@edmundhung , your help would be greatly appreciated ☺️

[edmundhung]

Your setup looks almost the same as the shadcn-ui example we had and it seems to be working with defaultValue properly. Hope this helps :)

[martialanouman]

Yes it helped me a lot. I saw the example on GitHub but did not realize the CountryPicker was built with Combobox.
Thanks!