#NextUI with React-Hook-Form Input wont register value anymore

22 messages · Page 1 of 1 (latest)

carmine cradle
#

Hello, something happened with the last update because it stopped working the Input component with React-Hook-Form. They simply do not save or change the value of the input. Everything was normal in the previous version.

<Input
    autoFocus
    isRequired
    radius="sm"
    type="text"
    label="Job Name"
    placeholder="Job name"
    variant="underlined"
    size="sm"
    className="basis-full"
    errorMessage={errors.job_name && errors.job_name.message}
    {...register('job_name')}
 />

This simply does not register any values anymore, Selects and other components do. If I stop using the NextUI Input component and change it to the native html component everything works fine. It happened to me after the last update. Thanks for your help!

#

Anyway, now I have to do this```
<Controller
name="job_name"
control={control}
render={({ field: { value, onChange } }) => (
<Input
autoFocus
isRequired
radius="sm"
type="text"
label="Job Name"
placeholder="Job name"
variant="underlined"
size="sm"
value={value}
onChange={onChange}
className="basis-full"
errorMessage={errors.job_name && errors.job_name.message}
/>)}
/>

#

Use the React Hook Form Controller and explicitly indicate the value and onChange. Should it be like this from now on?

lethal sand
#

mine is working fine with ...register('key_here')

# 
<Input
  {...form.register('email')}
  type="text"
  label={t('email.label')}
  placeholder={t('email.placeholder')}
  labelPlacement="outside"
  errorMessage={form.formState.errors.email?.message}
  autoComplete="email"
  isRequired
/>
lethal sand
light solar
light solar
#

It works in codesandbox in a Vite setup, but doesn't work in my Next.js 14.0.2 app router application.
Running reset sets the value, but when you hover over the field the value disappears.
I forked this https://codesandbox.io/p/devbox/nextui-v2-react-hook-form-xnwxt8, and changed to the latest react-hook-form version, and that works fine on codesandbox, so it might be something related to Next.js ?

light solar
light solar
#

I apologize, apparently the lock file didn't update, so it was not running the latest version, it does seem like something has broken in NextUI, so causes both the default value, and clear button to stop working.
It probably has to be related to ref.

lethal sand
#

Yes. The newer version broke the {...register(...)} unfortunately. Only works with controller and using defaultValue instead of value (without showing errors in console.log).

light solar
#

Doesn't seem like a straight forward fix either, unfortunately.

#

Wrapping everything in Controller is unfortunate.

lethal sand
#

I agree...

polar hound
#

I couldn't see the issue with the following versions. no Controller is used.

"@nextui-org/react": "^2.2.9",
"react-hook-form": "^7.50.1",
lethal sand
#

are you using the same page to be 'new/edit'?

#

sending things is not the problem

#

and don't you have a console warn?

polar hound
#

do you use custom component in a form?

lethal sand
#

Using like this: ```ts
<Input
{...form.register('name')}
type="text"
label={t('name.label')}
placeholder={t('name.placeholder')}
labelPlacement="outside"
errorMessage={form.formState.errors.name?.message}
isRequired
/>

#

the problem is that in "edit" mode doesn't work as expected