[BUG] - Auto complete on rerender watch item display value

[pikselinweb]

NextUI Version

@nextui-org/react

Describe the bug

I am using Next ui with react hook form. When i select item set correctly. But when i type something in other component it value switch to display value.

<Autocomplete
                        name="code"
                        // value={countryCode}
                        label={t("common.code")}
                        variant="bordered"
                        placeholder={t("common.code")}
                        labelPlacement="outside"
                        className="w-full sm:w-32"
                        defaultItems={countriesWithDialCode}
                        radius="sm"
                        classNames={{ base: "font-bold" }}
                        isInvalid={has(errors, "code")}
                        errorMessage={errors.code?.message}
                        {...register("code")}
                        // onSelectionChange={handleCodeChange}
                    >
                        {item => (
                            <AutocompleteItem key={item.code} value={item.code}>
                                {item.dial_code}
                            </AutocompleteItem>
                        )}
                    </Autocomplete>

here is the problem output:

When i input phone number it switch to display value in this example.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use in form with react hook form.
2. Create an auto complete for country code, a text input for phone number
3. Disable text input if country not selected by using watch from react hook form.
4. Select country
5. Start typing phone number. Country code watch value will switch to display value.

Expected behavior

County code must be as auto complete item value.

Screenshots or Videos

No response

Operating System Version

MacOs

Browser

Chrome

[pikselinweb]

I solved issue by use Controller.

 <Controller
                        control={control}
                        name="code"
                        render={({ field: { onChange, onBlur, value } }) => (
                            <Autocomplete
                                selectedKey={value}
                                label={t("common.code")}
                                variant="bordered"
                                placeholder={t("common.code")}
                                labelPlacement="outside"
                                className="w-full sm:w-32"
                                defaultItems={countriesWithDialCode}
                                radius="sm"
                                classNames={{ base: "font-bold" }}
                                isInvalid={has(errors, "code")}
                                errorMessage={errors.code?.message}
                                {...register("code")}
                                onSelectionChange={value =>
                                    onChange({ target: { value } })
                                }
                                onBlur={onBlur}
                            >
                                {item => (
                                    <AutocompleteItem
                                        key={item.code}
                                        value={item.code}
                                    >
                                        {item.dial_code}
                                    </AutocompleteItem>
                                )}
                            </Autocomplete>
                        )}
                    />

registering all props may cause problem with react hook form.