@mantine/hooks useClickOutside ref typescript type is immutable

[scamden]

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?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

useClickOutside returns

import("react").RefObject<T | null>;

Which is readonly. React's types don't allow you to pass this to <div ref= which is the canonical example given in the docs.

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

No response

Possible fix

I believe this should be MutableRefObject instead

Self-service

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

[noahw3]

I just came across this with useElementSize as well. It looks like it was introduced in 7.15.0. It switched from ref: import("react").RefObject<T>; to ref: import("react").RefObject<T | null>;.

[noahw3]

Also, looks like this is a dupe of #7252

[rtivital]

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

[scamden]

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

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

Needs to specify the element type to see the bug.

Actual issue looks like: useClickOutside adds null to the ref type but LegacyRef on divs don't want the null.

The reason MutableRefObject happens to fix this, for the curious, is because it's type directly accepts the generic without adding null

 interface MutableRefObject<T> {
        current: T;
    }

whereas RefObject adds the null therefore inferring a non-null T for the generic

    interface RefObject<T> {
      /**
       * The current value of the ref.
       */
      readonly current: T | null;
  }

[rtivital]

MutableRefObject type is marked as deprecated in @types/react@19. Currently, it is not planned to change these types back. To fix the issue with @types/react@18, remove type you pass to the hook – it is not required.

[scamden]

MutableRefObject type is marked as deprecated in @types/react@19. Currently, it is not planned to change these types back. To fix the issue with @types/react@18, remove type you pass to the hook – it is not required.

Removing that type makes it a RefObject<any>. I’d prefer more type safety than that. If you all simply don’t add null to the generic type’s union this type will compile. I’m happy to make a fix PR for this if it helps.

[rtivital]

Okay, you are welcome to submit a PR