Destructing isDirty from formState causing error with cursor-position in masked input

[Danane84]

Hi,

i just bumped into the following bug: Destructing formState: {isDirty} from react hook form's useForm leads to an unexpected left-jump of the cursor position when entering the first value into a masked input, eg. typing 123456 will lead to a value of 234561.

Here is a codesandbox with the error replicated: https://codesandbox.io/p/sandbox/friendly-galois-tzw59m

Please let me know if you need any further information!

Update: I just realized that the same bug occus after a yup validation error was triggered: So if I type something in the masked input, which has a .required() yup-validation rule and then delete the input, when the error is triggered, the cursor-position jumps unexpectedly one to the left.

[eduardoborges]

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

[rafma0]

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

https://github.com/eduardoborges/use-mask-input/assets/28578847/dae833f3-7980-4582-9fc2-08e9d7a87643

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'

[eduardoborges]

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!

[rafma0]

@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.

[engylemure]

@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