How to get the benefits of autocomplete from useCombobox (downshift), with the benefits of Conform error handling ?

[Varkoff]

Hi everyone ! I need assistance with something and didn't know where to ask the question.
Github Discussions seemed a good fit.

Kent made an article a few months ago, regarding full-stack components. https://www.epicweb.dev/full-stack-components
I've been using his autocomplete input with Google Places Autocomplete. It works like a charm.

Now, though, I get the parsed errored field from the onValidate function, but they are not present in the fields.property.errors key and I would like to know why.

I know I'm handling input props incorrectly, because using Epic Stack's component makes it work.

useCombobox from the downshift library is already settings props for the input.

How to get the benefits of autocomplete from useCombobox, with the benefits of Conform error handling ?

export function SimplifiedAddressCombobox({
    name,
    defaultAddressValue = '',
    defaultPlaceIdValue = '',

    inputProps,
    labelProps,
    errors,
}: {
    name: 'address';
    defaultAddressValue?: string;
    defaultPlaceIdValue?: string;

    labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
    errors: ListOfErrors;
}) {
    const { selectedAddress, cb, displayMenu, addresses } = useAddressCombobox({
        defaultValue: defaultAddressValue,
    });

    const fallbackId = useId();
    const id = inputProps.id ?? fallbackId;
    const errorId = errors?.length ? `${id}-error` : undefined;

    const { value, name: inputName, ...visibleInputProps } = inputProps;

    return (
        <div className='relative'>
            <input
                name={name}
                type='hidden'
                value={selectedAddress?.address}
            />

            {name === 'address' ? (
                <input
                    name='placeId'
                    type='hidden'
                    value={selectedAddress?.id}
                />
            ) : null}

            <Label htmlFor={id} {...labelProps} className='text-start' />
            <div>
                <input
                    {...cb.getInputProps({})}
                    id={id}
                    {...visibleInputProps}
                    aria-invalid={errorId ? true : undefined}
                    aria-describedby={errorId}
                    {...(defaultAddressValue && {
                        autoComplete: 'off',
                    })}
                />
            </div>
            <AddressesDropdown
                addresses={addresses}
                cb={cb}
                displayMenu={displayMenu}
            />
            <ErrorList id={errorId} errors={errors} />
        </div>
    );
}

[edmundhung]

Hi @Varkoff, I believe the issue you had is caused by the hidden type input. If you use the hidden attribute instead (i.e. <input hidden />), it should work. This is a limitation caused by the use of the setCustomValidity API at the moment and it will be addressd when we release the changes described on this RFC.