Implement integration with input mask libraries

[leonardopn]

Is your feature request related to an issue? Please describe.
I love using the library in my forms, but I always get frustrated when I need to use masks in my inputs. I've tested several libraries and I believe I never got an ideal behavior using libs + RHF.

Describe the desired solution
I believe that there are libraries that work well on their own to mask inputs like: imask or react-input-mask, but they lack an integration with RHF as we have with resolvers for yup, joi and so on.
An integration would be a very nice addition to a form.

Describe the alternatives you considered
imask or react-input-mask would be interesting libs to start with, especially imask which has more updates. I believe that an obstacle that I have been facing with these libraries would be the fact that the two conflict with regard to the state update, either by controlled or uncontrolled components.

Additional context
none

[bluebill1049]

Thanks for the feature request @leonardopn react hook form is headless and that's by design, we would not directly integrate with any library however we do expose hook to integrate with the external controlled component. I remember there is a mask input in this codesandbox: https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5

I am to discuss what's difficult and come up with a solution but we probably not going to a route to directly integrate with another library, in fact, it would make more sense the reverse order.

[regdos]

My example with react-hook-form + ract-imask + yup - https://codesandbox.io/s/react-hook-form-yup-react-imask-v2y1fl
Works fine with one small exception - cannot be used unmask={true} because unmasked value is only returned to onAccept event.
For onBlur value is returned always with mask.

[CalMlynarczyk]

Unfortunately this doesn't seem to work with reset either. This is the biggest issue with every method I've tried to integrate IMask and react-hook-form while keeping the inputs uncontrolled. There doesn't seem to be a way to explicitly pass a value into the field (ex. pre-filling) and have it be masked.

I've looked through this project's source and I'm guessing that it has to do with how react-hook-form manipulates refs and IMask doesn't know how to trigger off of that. I don't know enough about refs though so not entirely sure if I'm on the right track.

[sankhadip-roy]

register from react-hook-form is not working for setting initial values and updating the value

but if we use controller from react-hook-form the approach of yours working fine, thanks

[bluebill1049]

thank you very much @regdos going to move to discussion.

[Mikilll94]

I have exactly the same problem. I would like to integrate react-imask + react-hook-form using uncontrolled components. But this seems impossible because react-imask uses onAccept event instead of onChange.

@bluebill1049 Could you check it? Maybe there is a way to integrate react-imask + react-hook-form using uncontrolled components?

[LuizHAP]

I have been tried this @Mikilll94 for while and I found a solution and put on codesandbox, but I had problems with this implementation when I paste a value or use browser history on this field (https://codesandbox.io/s/awesome-hooks-5i0r9d?file=/src/App.tsx).