palantir/blueprint

Table header cell - Clicking on an an element also selects the column.

Open

#3,685 opened on Jul 30, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Domain: APIPackage: tablehelp wanted

Description

Environment

  • Package version(s): blueprint-table 3.4.1
  • Browser and OS versions: Chrome 75.0.3770.142

Steps to reproduce

  1. Have a table with buttons or a drag handle in the column header cells, and selection enabled.
  2. Click on the button or handle.

Actual behavior

The column is selected, since selection is enabled.

selection

This is particularly annoying when selection causes other things on the page to render, potentially moving the table and then no longer executing the intended click action.

selection-move

Expected behavior

Clicking on an element in the header that has interaction ignores selection.

Possible solution

I noticed that header cells have an ignoredSelectors prop, which does exactly what is needed here, but isn't exposed. Would be nice if this was exposed, so we can add css selectors that could be ignored.

I also noticed the isHeaderMouseTarget static method in the ColumnHeaderCell, but then we need some sort of callback on header click to know what the target is.

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
clear
Prerequisites
ReactBlueprint table
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the ColumnHeaderCell component in the Blueprint table. Find where ignoredSelectors prop is used internally and determine the best way to expose it. Consider adding a new prop to the table's column header cell that allows users to specify CSS selectors to ignore for selection. Reference the existing isHeaderMouseTarget method.
Table header cell - Clicking on an an element also selects the column. · palantir/blueprint#3685 | Good First Issue