palantir/blueprint

Support Mac-style drag+release in Select package

Open

#5328 opened on May 26, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: selectType: feature requesthelp wanted

Description

Environment

  • Package version(s): 4.2.0 Select
  • Browser and OS versions: Chrome 101.0.4951.64, OS X 12.3.1

Feature request

Support Mac-style drag+release to change the selection in a Select component.

Expected behavior:

  1. Hover over Select component
  2. Press down on mouse (options list appears)
  3. Drag down one item (hover state follows cursor)
  4. Release to select (item is selected)

Actual behavior: 2. Press down on mouse (no option list appears) 3. XX 4. XX

Examples

How it works on Mac:

https://user-images.githubusercontent.com/357170/170533964-72c9a2b7-cc14-49b8-b935-02cf4fc936a5.mov

How it works (currently) on Blueprint:

https://user-images.githubusercontent.com/357170/170534462-e9598703-a45b-49c6-b560-28cd6d39c4fa.mov

As tested on https://blueprintjs.com/docs/#select/select-component

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.
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.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of React and TypeScriptFamiliarity with Blueprint Select component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The feature request involves adding Mac style drag and release behavior to the Select component. Files to explore include src/components/select/selectComponent.tsx and related popover logic. Study the Mac native select behavior from the provided video: press and hold to show options, drag to hover, release to select. In Blueprint, the Select currently opens on click and closes on click outside. Implement mouse events (mousedown, mousemove, mouseup) to show the options list on mousedown with a delay, track hover via mouseenter on items, and select on mouseup. Ensure compatibility with existing keyboard navigation and accessibility.