Focus/clicking issues with dialogs triggered from a table cell

[jluyau]

🐛 Bug Report

If a dialog is triggered from an action button in a table cell, clicking the dialog or the underlay will select the row from where the dialog was triggered. This prevents any dialog text selection or focus of any focusable children in the dialog content area. Clicking dialog buttons does still work however.

🤔 Expected Behavior

Clicks should not pass through the dialog/underlay and focusable children in the dialog should be focusable.

😯 Current Behavior

Clicks pass through the dialog (and select the table row). Focusable children in the dialog cannot be focused (e.g., textfields).

💁 Possible Solution

🔦 Context

💻 Code Sample

https://codesandbox.io/s/blue-dew-z0woi?file=/src/App.js

Click any of the action buttons to trigger a dialog. Click the dialog body or underlay and observe that the row will toggle selection or that clicking the textfield will not focus the textfield for text input.

🌍 Your Environment

Software	Version(s)
react-spectrum	3.9.0
Browser	Chrome
Operating System	MacOS Catalina

🧢 Your Company/Team

Adobe/Quarry

🕷 Tracking Issue (optional)

[devongovett]

Probably because events bubble through portals in React. Two options:

1. Stop propagation on all events at portal boundaries (e.g. overlays).
2. Check if the ref contains the event target in the DOM in useSelectableItem. Or maybe even in usePress?