react-modal-sheet icon indicating copy to clipboard operation
react-modal-sheet copied to clipboard

Can't select text in sheet; recommended workaround?

Open TrySpace opened this issue 5 months ago • 0 comments

What would you recommend doing if I want the content, or text within a sheet to be selectable, without dragging the sheet? I need some text to be selectable on either mobile or desktop.

I've tried doing things like:

onMouseDown={(e) => {
  e.stopPropagation()
  e.preventDefault()
}}
onDragStart={(e) => {
  e.stopPropagation()
  e.preventDefault()
}}

on the content elements, or subcontainer of either Sheet.Content or Sheet.Scroller but that doesn't prevent the sheet from incercepting the event somehow...

I also thought that using <Sheet.Scroller draggableAt="top"> would have avoided this issue, but that doesn't work on desktop. It's a bit confusingly named but it makes sense on mobile. The confusion here is that while this works on mobile (although you can't select text either), on desktop the draggable will still be active regardless of where you are in the scroll area.

Basically I'd like the option to disable/bypass some specific areas to not trigger dragging instead of disabling dragging altogether with disableDrag. I though about doing using a combination of disableDrag with the scrollTop of the content or the snap position of the sheet but it would be very contrived. But this still wouldn't solve the issue of not being able to select text.

Basically what you now put in the body is very limited to how you can interact with it, although I do understand the primary usecase for a sheet is quite simple.

My preferred behavior would be when the sheet is completely open, then only the top handle would drag the sheet, instead of the whole body of the sheet becoming a drag-handle. (basically how the example works on mobile, but on desktop) And that text becomes selectable.

Maybe with a new property disableDragBody this could be achieved quite simply.

TrySpace avatar May 17 '25 13:05 TrySpace