mattermost-community/focalboard

Bug: Unable to drag to select text in table view

Open

#4844 opened on Sep 6, 2022

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (26,187 stars) (2,542 forks)user submission
Help WantedSev/3Up for grabs

Description

Steps to reproduce the behaviour

  1. Create or go to a board in table view
  2. Ensure that the view has an editable text column
  3. Attempt to drag to select text from within that column

Expected behaviour

The text is selected. Instead, the whole row is picked up and dragged, and if you drop it, it often gets moved even if you drop it in the same place you started.

At a higher level, I'd expect clicking and dragging the mouse to only trigger text selection as long as the cursor is within an editable textbox. I'd only expect the whole row to get dragged when first clicking outside of an editable field.

Edition and Platform

  • Boards plugin on community in MM Desktop App on Mac
  • Focalboard 0.15.2 (33) standalone on Mac

Additional context

This might be related to https://github.com/mattermost/focalboard/issues/1620, but I'm not sure if those components handle dragging/selection differently

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
TypeScriptReactDrag and drop events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the related issue #1620 for context. Locate the table view component (likely in webapp/src/components/tableView). Look at the drag handler for rows to see why mousedown events are not being captured properly for text selection. Check if there is a need to stop propagation or use a different event handling for editable text fields. Review any recent changes to the component that might have introduced this behavior.