[@mantine/core] RadioGroup not compatible with React Hook Form

Mantine’s RadioGroup (and likely other form elements) are not compatible with React Hook Form, a popular forms library.

Repro is here, where I try to register the RadioGroup input with the form: https://codesandbox.io/s/frosty-vaughan-0j0xb

Specifically it seems like the onChange parameter has a different type in Mantine and react-hook-form:

Type '{ children: Element[]; onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; name: string; }' is not assignable to type 'RadioGroupProps'.
  Types of property 'onChange' are incompatible.
    Type 'ChangeHandler' is not assignable to type '(value: string) => void'.
      Types of parameters 'event' and 'value' are incompatible.
        Type 'string' is not assignable to type '{ target: any; type?: any; }'.ts(2322)

Package versions:

  "dependencies": {
    "@mantine/core": "3.2.2",
    "@mantine/hooks": "3.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hook-form": "7.20.2",
    "react-scripts": "4.0.3"
  },

[getTobiasNielsen]

https://codesandbox.io/s/frosty-mahavira-jexit?file=/src/App.tsx

[LucasLemanowicz]

Thanks for the help over Discord, @getTobiasNielsen

I’ll use this controller method for now, and look into getting a PR in at RHF to use the getControllerValue helper in register’s onChange implementation in the next week or two.