[BUG] useOnClickOutside doesn't allow null ref

[OskarD]

Describe the bug

The sample code in https://usehooks-ts.com/react-hook/use-on-click-outside#usage throws a TypeError:

Argument of type 'RefObject<HTMLDivElement | null>' is not assignable to parameter of type 'RefObject<HTMLElement> | RefObject<HTMLElement>[]'.
  Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'RefObject<HTMLElement>'.
    Type 'HTMLDivElement | null' is not assignable to type 'HTMLElement'.
      Type 'null' is not assignable to type 'HTMLElement'.ts(2345)

To Reproduce

  const ref = useRef(null)

  const handleClickOutside = () => {
    // Your custom logic here
    console.log('clicked outside')
  }

  const handleClickInside = () => {
    // Your custom logic here
    console.log('clicked inside')
  }

  useOnClickOutside(ref, handleClickOutside)

Expected behavior

Should accept null

Additional context

No response

[Xevion]

Yeah, just hit this while updating dependencies. It started erroring before I updated from 2.9.1 to 3.1.0, though; so I don't think this is a mere regression.

Regardless, what's the intended fix here? Kinda frustrated.

[arsinclair]

Before a fix is available you can override the types like so:

useOnClickOutside<HTMLUListElement>(ref as React.RefObject<HTMLUListElement>, () => setIsOpen(false));

although, I am not endorsing it.