Allow text selection within selectable Table rows (mixed interaction support)

[BMCwebdev]

Heyo. I’m working with the React Aria Table (via React Aria Components) and ran into an interaction limitation that I wanted to ask about and get your thoughts on.

Context

We have a table with:

• selectionMode="multiple" (row selection enabled)
• cells that contain plain text, links, and buttons

A common user expectation for this type of UI (similar to file explorers or data grids) is:

• clicking a row → selects the row
• clicking interactive elements (buttons/links) → triggers those actions
• click-drag on text → selects text for copying

---

Problem

Currently, text selection inside table cells is effectively disabled.

From what I understand, this is due to the usePress interaction model, which intentionally disables text selection during press interactions.

This makes sense for consistent press behavior, but it creates a limitation:

There is no built-in way to support both row selection and text selection within cells.

---

What I’ve tried

I was able to partially work around this by preventing the press interaction from reaching the row (I think I read this somewhere in a comment Devon made):

function SelectableCellText({ children }) { return ( <span onPointerDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} style={{ userSelect: 'text', cursor: 'text' }} > {children} </span> ); }

This allows text selection to work, but:

• it relies on event interception
• it feels like an implementation detail workaround
• it may be brittle depending on how interactions are wired internally
• using onPointerDownCapture seems more reliable, but still not ideal

We (the design system team) also suggest to our users to use a copy button. However our users (product teams) don't always know what data is going to be in the table. Or which cells may be the ones their users will want to copy.

---

Question

Is there a recommended pattern for supporting this kind of mixed interaction?

More specifically:

1. Is this behavior (no text selection in selectable rows) considered intentional and expected?
2. Is there an existing API or pattern I may be missing?
3. Would something like the following make sense at the library level?
   • a prop like allowTextSelection on Table / Row / Cell
   • or a way to define “non-interactive” or “non-selecting” regions within a row

---

Summary

• React Aria prioritizes press-based row selection (understandably)
• but there’s no clear way to opt into mixed interaction surfaces

Would love to hear how you’d recommend approaching this.

Thank you!

[snowystinger]

I believe you're looking for #2585

[BMCwebdev]

Thank you!