Generic type issue with new useForm hook

What package has an issue

@mantine/form

Describe the bug

When passing a type generic to the new @mantine/form useForm hook, the types for the validate object are not inferred correctly. All value types become unknown.

Sandbox link

Furthermore, the unknown types are strictly enforced by TypeScript, e.g. it’s not possible to type them in the function parameter because that becomes incompatible with unknown.

There has already been some conversation around this in Discord, but I wanted to document the issue here because in its current state the hook is very hard to use with any types that cannot be inferred from initialValues.

In which browser did the problem occur

N/A

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/strange-elgamal-vd0ern?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

I had a look at the types and I’m not sure quite sure why this is happening. I would be happy to help make a PR but I can’t quite figure out what the PR would look like for now 😅 if anyone has a hint as to what to try, I will be happy to give it a shot!

[rtivital]

Alright, I’ve managed to fix it in 4.0.9 release. It should work fine now. The solution was to replace Record – https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABFApgZygHgCoD4AUAbgIYA2I6AXItgJTUDeiA2gAqIxIDWKAnnMBoBdakTLVsbIbUQBeXIgBGcOKRTEwAX0QMAUIgOIATiiggjSBtuJpEG3gG5dm3bogIMducnRR8TYBVqAHJUDGCAGiViI2oAFgAmRE1aJ11iADpAuHSMxRigA

[alexturpin]

@alexturpin I know this doesn’t answer your question, but I always roll with react-hook-form. This isn’t a knock on Mantine’s hooks. Personally, I haven’t tried them, but rhf is really good at what it does - including inferring types. I’m using it with Mantine on one of my projects right now and it’s worked perfectly without any issue at all.

Thanks for the suggestion! I am indeed aware of other form solutions such as RHF but I like Mantine’s useForm API and I especially like that I can get a simple, low overhead hook for form handling right from Mantine.