[BUG] - NextUI Input Field Value Disappears on Mouse Hover When Using React Hook Form

[iGmainC]

NextUI Version

2.4.6

Describe the bug

When using NextUI's Input component with React Hook Form, the input field value disappears upon mouse hover after setting the value programmatically with setValue.

Your Example Website or App

https://github.com/iGmainC/nextui-bug

Steps to Reproduce the Bug or Issue

Create a React component using Next.js, NextUI, and React Hook Form.
Set up a simple form with two input fields: name and password.
Add a button that, when clicked, sets the name field value to "root" using React Hook Form's setValue method.
Hover over the input field after clicking the button.

Expected behavior

The input field should retain the value "root" when hovering over it.

Screenshots or Videos

QQ2024823-1528.mp4

Operating System Version

linux

Browser

Chrome

[linear]

ENG-1290 [BUG] - NextUI Input Field Value Disappears on Mouse Hover When Using React Hook Form

[iGmainC]

@wingkwong The Select component has a similar problem.

[wingkwong]

Reopening this issue. The linked PR has been rollbacked.

[iGmainC]

@wingkwong

20240906-104151.mp4

My code repository nextui-bug has been updated.

I now suspect that Radio and Checkbox components also have similar problems.

[wingkwong]

may need to check all input based components once

[jprosevear]

I believe this is also an issue when using useForm({values}) which can be delayed and then synced to the inputs later (on promise resolution with API for instance).

[MikhailMarczal]

same issue here, nextui version 2.4.8
I'm using Controller as a workaround

[parteekmalik]

@MikhailMarczal can you explain how to use controller

[jprosevear]

@parteekmalik https://react-hook-form.com/docs/usecontroller

[milos201]

I noticed it says "Fixed by #3533". This is not fixed.

[wingkwong]

let's track in #3436 from now on.