Is it possible to allow click events to propagate when clicking on elements outside of an overlay?

[ctotheameron]

We have a few use-cases where we are using useOverlay() and want to be able to have our "outside interactions":

1. Dismiss the active overlay
2. Have the click trigger on the element outside of the overlay

Example use cases:

1. We are using useOverlay() to implement Tooltip-like popovers, we want our users to be able to click from one overlay trigger to the next without requiring 2 clicks (one to dismiss the active and one to active the next)
2. Similar use case to (1) but with menus (we have multiple dropdown menus)

[snowystinger]

Hey! Thanks for the discussion. This has been the topic of many conversations in our team. We've gone with matching native Mac behavior. For example, if you open the 'File' menu, then click on the textarea to make a reply to this discussion in github, it'll take two clicks. One to close the menu, one to focus the textarea.

This is also the case within applications System Preferences -> Date & Time -> Open Language & Region. Open the Temperature select, then try to open the Region select. It'll take two clicks.

We realize this is in opposition to Windows. However, due to a few choices we made when creating overlays, we cannot support both paradigms. You can read some of the bugs we had when we allowed clicking to both close and interact with the new element outside. #1155

One thing we're working on right now is an invisible underlay that will stop things like hover on any elements in the background, more clearly communicating visually the same thing that screen readers see. If a popover is open, that is the only thing that can be interacted with until it is closed.

One interesting point to note is that in the native Mac menu bar at the top, if you open one and hover the next one over, it'll open automatically. You might* be able to adopt that behavior using our hooks. Or that might be a good place for a discussion. Our tooltips have this behavior of warm ups and cool downs for instantly showing when hovering several in a row.

[ctotheameron]

FYI - We were able to find a workaround (hack) like this:

const overlayProps = useOverlay({
  //..
  shouldCloseOnInteractOutside: (_) => {
    state.close();
    return false;
  },
  //..
})

Obviously this is not ideal, and there are probably A11y implications of doing it this way, but pasting here in case anyone else has similar need to go rogue.

One thing - I notice you're grabbing the React.SyntheticEvent target, typecasting it to Element and passing it to this method. It might be nice to also have access to the original event (possibly as a second arg if you don't want to break backwards compatibility).