Docs are missing section on InteractOutside

[rhysevans-qz]

🙋 Documentation Request

It's exported alongside the other hooks, and seems intended as a public API, but is completely missing from the documentation.

🧢 Your Company/Team

Quizlet

[yihuiliao]

Yeah we are aware that we are missing quite of few docs for our hooks, but we do plan to add additional documentation for them soonish

[snowystinger]

I think this response will have some more relevant information #9904 (comment)

The short of it is that useInteractOutside is considered private, we'd need to discuss making it public. If you can provide use cases or a description of how you're using it, that would be helpful to the discussion.

[rhysevans-qz]

Probably using it similarly to how you use it internally: to handle a click or other interaction outside a target element that reliably works even as the react-aria library evolves. I'm working on fixing a bug with multiple pop up menus being open at the same time: opening one should automatically close all others. We had:

  useEffect(() => {
    if (
      isOpen &&
      !isMobileSearchable &&
      (shouldCloseOnBlur || shouldCloseOnClickOutside)
    ) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

At some point* this stopped working for cases when the click outside was on a button that used react-aria to handle events since it stops propagation of the bubble. So the solution is to use capture for the click outside handler, and it seems safer to consume one published by yourselves that takes care of any known edge cases and will get updated to deal with any emerging edge cases as the rest of the library evolves. Now we have (waiting to be merged)

  useInteractOutside({
    ref: overlayRef as React.RefObject<Element>,
    isDisabled:
      !isOpen ||
      isMobileSearchable ||
      (!shouldCloseOnBlur && !shouldCloseOnClickOutside),
    onInteractOutside: useCallback(
      event => {
        if (triggerRef.current?.contains(event.target as Element)) {
          return;
        }
        if (onClose) onClose();
        state.close();
      },
      [state, onClose]
    ),
  });

We could reimplement the hook ourselves, but it's a ~150 line function and I'd be nervous about understanding which bits are/aren't relevant to our use case, so copying it into our codebase feels safer but a) then we have some complex library code that's poorly understood by us b) it can still go out of sync with your other interaction implementations.

*it's possible that it never worked but seems unlikely as the bug would be quite easy to spot when developing the feature