React hook form | Browsers auto fill. How to make so that input knows about the data from auto fill

Question

How to make so that input knows about the data from auto fill? You can go to codesandbox, add some auto-fill data, refresh a page and see this problem. Is there any idea how to fight it?

It doesn't work:

• autoComplete="off"
• autoComplete="new-password"

autoComplete="new-password"

There is a code:

https://codesandbox.io/s/react-hook-form-mantine-npvcof?file=/src/App.js

This thing we get at first:

Answer 1

Considering that I use the mantine lib this way helped me

https://ui.mantine.dev/component/floating-label-input

Anyway, I think it can help to come up with an option how to work it out

Answer 2

I had issue like this with matterial UI, and the reason was that I didn't wrapped Input with FormControl component.

Answer 3

in this case you can use register to register the attributes, instead of having onChange as an attribute for instance an input.So we can use onChange inside the register method!

DO NOT THIS:

<input
...
onChange={handleInputChangeFunction}
...
/>

DO THIS:

<Input
...
{...register('inputName', {
...,
onChange(event) {
   handleInputChangeFunction(event);
},
...
/>

it should work perfectly fine!