Destructing isDirty from formState causing error with cursor-position in masked input about use-mask-input HOT 5 OPEN

@eduardoborges This issue is related to the recreation of the register and the ref on re-renders of the component that uses the withMaskInput or the useHookFormMask, to fix this it could be necessary to create some kind of hook that will memorize it's usage using as dependencies only the parameters of it https://codesandbox.io/p/sandbox/misty-mountain-5fqg48?file=%2Fsrc%2FApp.tsx%3A39%2C31

from use-mask-input.

It seems like the cursor goes to the start of your active input on every rerender, also it freezes the mouse hover placeholder if its showing when a rerender happens

In this video I used a Joi validation for testing, like this

volume: Joi.number().min(50).max(100)

I hope this helps someone figure what's happening bc I have no clue 🤣
(and it's the only thing keeping me from using this lib in every project from now on)

My "solution" for now is setting in react-hook-form

reValidateMode: 'onSubmit'

from use-mask-input.

@eduardoborges maybe reopen this? revalidate onSubmit works but its different from the default behaviour from react-hook-form which is, after you submit the form, it start revalidating all fields on input change. For me, the default is still the preferred behaviour if we can make it work somehow.

from use-mask-input.

@Danane84 Uh, its a insteresting issue. I will investigate that!

from use-mask-input.

It seems like the cursor goes to the start of your active input on every rerender, also it freezes the mouse hover placeholder if its showing when a rerender happens

output.mp4
In this video I used a Joi validation for testing, like this

volume: Joi.number().min(50).max(100)

I hope this helps someone figure what's happening bc I have no clue 🤣 (and it's the only thing keeping me from using this lib in every project from now on)

My "solution" for now is setting in react-hook-form

reValidateMode: 'onSubmit'

Great solution!

from use-mask-input.