Autocomplete - Is it possible to use Autocomplete with react-form-hook?

[dinbtechit]

Autocomplete - Is it possible to use Autocomplete with react-form-hook?

<Controller
              control={control}
              name="category"
              render={({
                field: { onBlur, onChange, value, ref },
                fieldState: { invalid, error },
              }) => (
                    <Autocomplete
                   ref={ref}
                  defaultInputValue={value}
                  errorMessage={error?.message}
                  isInvalid={isInvalid}
                 isLoading={isSearching}
                 label="Category"
                 startContent={
                   <Search className="text-black/50 dark:text-white/90 text-slate-400 scale-[0.90] pointer-events-none" />
                 }
                value={value}
               onBlur={onBlur}
              onChange={onChange}
              onInputChange={(value) => {
                   searchCategory(value);
               }}
         >
          {categorySuggestions.map((it) => (
               <AutocompleteItem key={it.label} className="capitalize">
                {it.label}
              </AutocompleteItem>
           ))}
         </Autocomplete>
 )}
 rules={{
       required: "Category is required",
    }}
 />

[wingkwong]

defaultInputValue , value and onChange are uncontrolled. You should just use selectedKey and onSelectionChange (which are controlled) instead.

selectedKey={field.value}
onSelectionChange={field.onChange}

[dinbtechit]

That worked. I appreciate the quick responses. One last question: the selectedKey right now can only store string | number. Is there any way I can store an object? I mean, I can do JSON.stringify(value), but it would be nice if I could pass an object directly.

[wingkwong]

I think it's not possible since the key is from the input value (p.s. autocomplete is just an input).