useButton stopping propagation

[csantos-nydig]

🐛 Bug Report

I need to globally listen for click events that happen in any component to close a floating element.

🤔 Expected Behavior

window.document.addEventListener("pointerdown", listener);

This should be called when clicking on any component, including react-aria buttons

😯 Current Behavior

react-aria buttons stop propagation of events, making global listeners not work as expected.

💁 Possible Solution

probably related to #2100 and #2525

🔦 Context

• We built our Button component using useButton from react aria.
• We built a FloatingMenu using https://github.com/floating-ui/floating-ui/
  • Their useDismiss hook closes the floating element by doing https://github.com/floating-ui/floating-ui/blob/684186bd50395912a82bcb613a4419f421b50dee/packages/react/src/hooks/useDismiss.ts#L251-L252

    doc.addEventListener(outsidePressEvent, closeOnPressOutside)
    

Here is an example with both useButton (from react-aria) and useFloating (from floating-ui)
https://codesandbox.io/s/use-button-floating-ui-eo3joc?file=/src/App.tsx

The floating menu from the last button ("Show context menu") isn't closing when "React aria-button" is closed

💻 Code Sample

https://codesandbox.io/s/use-button-global-listeners-r6rg6x?file=/src/App.tsx

• Clicking anywhere in the page (title, body, text, native button, links, etc) trigger the global pointerdown listener
• Clicking on the react-aria button doesn't trigger the global listener 😞

🌍 Your Environment

Software	Version(s)
@react-aria/button	3.7.0

[snowystinger]

That outside press listener should probably be a capturing listener. There are many reasons something might stop propagation. I doubt we are the only instance where this would be problematic for closing the overlay on a click outside.

We do this ourselves in our useInteractOutside

react-spectrum/packages/@react-aria/interactions/src/useInteractOutside.ts

Line 68 in 3f91517

document.addEventListener('pointerdown', onPointerDown, true);

[csantos-nydig]

Thanks for the quick response @snowystinger - I ended up using their hook for partial stuff:

useDismiss(context, { outsidePress: false, referencePress: false })

And your hook for the other "clicking outside"

  useInteractOutside({
    ref: floatingRef,
    isDisabled: !isOpen,
    onInteractOutside: useCallback(({ target }) => {
      // skips the button reference because its onPress already swaps the open state
      if (referenceRef.current?.contains(target)) {
        return;
      }

      setIsOpen(false);
    }, [])
  });