Account for multiple refs? about use-onclickoutside

[corysimmons]

Not niche. I'm also trying to create multiple things where if you click outside any of them, they close.

Like... imagine an image gallery. Pretty big use case right there.

In my case it's swatches using react-color and trying to do something like

<Swatch ref={someRef} />
<Swatch ref={anotherRef} />

[garand]

I updated my listener method to this which allows me to pass a single ref or an array of refs.

const listener = (event: PossibleEvent) => {
    const shouldTrigger = !Array.of(refs)
      .flat()
      .some(
        (ref) => !ref.current || ref.current.contains(event.target as Node),
      )

    if (shouldTrigger && handler) handler(event)
}

[Andarist]

Could you describe an example use case in more detail?

[ryanscottaudio]

let's say we have two modals on the screen, both in portals, and we want to close both of them if the user clicks the space outside of either one of them

[Andarist]

But you never want to close any of them if a user clicks inside any of them? Do those modals stack/overlap?

[ryanscottaudio]

they wouldnt stack/overlap, no, but we'd want to detect a click outside of either one of them

[Andarist]

This seems like a rather less popular use case. I would recommend composing this in your codebase like this:

export default (refs, handler) => refs.forEach(ref => useOnClickOutside(ref, handler))

Or just establish parent-child relationship and set up a single useOnClickOutside hook in each modal with the same handler plugged to them. If 2 handlers will call smth like setShow(false) then React will just bailout from the second processing because your state will already be false, no harm done.

[ryanscottaudio]

export default (refs, handler) => refs.forEach(ref => useOnClickOutside(ref, handler)) won't work because if you click inside modal 2, you're also clicking outside modal 1, so the callback will trigger, when in reality you want it to trigger only when you click outside of either modal

[Andarist]

Right - no of the proposes approaches would work for you. I still believe that this use case is rather niche though and I wouldn't like overloading the implementation.

If we can come up with a neat implementation then I could consider merging it. At the moment there is no way to configure containment check, so maybe if we would make this configurable it would solve your issue as well? A very WIP implementation could look like this:

export default function useOnClickOutside(
  refOrContainsCheck: React.RefObject<HTMLElement> | (node: Node) => boolean,
  handler: Handler | null,
) {
  if (!isBrowser) {
    return
  }

  const latestRef = useLatest({
    handler,
    contains: typeof refOrContainsCheck === 'function'
      ? refOrContainsCheck
      : node => {
          const refNode = refOrContainsCheck.current
          return !!refNode && refNode.contains(node)
      }
  })

  useEffect(() => {
    if (!handler) {
      return
    }

    const listener = (event: PossibleEvent) => {
      const { contains, handler } = latestRef.current
      
      if (!handler || contains(event.target as Node)) {
        return
      }

      handler(event)
    }

    events.forEach(event => {
      document.addEventListener(event, listener, getOptions(event))
    })

    return () => {
      events.forEach(event => {
        document.removeEventListener(event, listener, getOptions(
          event,
        ) as EventListenerOptions)
      })
    }
  }, [!handler])
}

Then you could do smth like this:

useOnClickOutside(
  targetNode => refs.some(ref => ref.current.contains(targetNode),
  handler,
)