mantinedev/mantine

useHover, useMouse, other hooks have a type error for refs

QuinnStraus opened this issue · 7 comments

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.15.1

What package has an issue?

@mantine/hooks

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

The type signature for the ref objects returned from the hooks is RefObject<T | null> rather than RefObject, creating the following type error when the refs are passed into the ref prop of an html element:
Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'RefObject<HTMLDivElement>'.
The hooks seem to still work as expected.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-lnp22m

Possible fix

Return the hook type signature to RefObject.

Self-service

  • I would be willing to implement a fix for this issue

Update: this seems to be an issue with react 19 changing the return type of useRef and the ref prop on html elements, since I had upgraded my project to mantine 7.15 but not react 19 yet. Codesandbox seems to also not have been using the react 19 types, causing the issue to reproduce there.

Same, issue for me with existing useElementSize, useHover and a few others.

I cannot reproduce the issue https://codesandbox.io/p/sandbox/mantine-react-template-forked-m23r4p
Please provide a sandbox with a minimal reproduction

@rtivital The codesanbox link posted with the ticket shows the TS error: https://codesandbox.io/p/sandbox/mantine-react-template-forked-lnp22m

image

Thanks, I've found the issue with some hooks, fixed it, will be available with the next patch.