palantir/blueprint

DateRangePicker shortcut still marked as active after manually updating the range

Open

#5,223 opened on Apr 4, 2022

View on GitHub
 (0 comments) (1 reaction) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: datetimeType: bughelp wanted

Description

Environment

  • Package version(s): "@blueprintjs/core": "^3.40.1", "@blueprintjs/datetime": "^3.22.0",
  • Browser name and version: Chrome

Code Sandbox

Link to a minimal repro (fork this code sandbox):

Steps to reproduce

  1. Create Date Range Picker similar to https://blueprintjs.com/docs/#datetime/daterangepicker image
  2. Select "Past 6 months" and notice shortcut selected image
  3. Change date range manually to a different range image

Actual behavior

"Past 6 months" shortcut still selected

Expected behavior

No shortcut marked as selected

Possible solution

Reset shortcut selection on date range changed in case it's updated.

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.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
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
ReactTypeScriptBlueprint components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The fix involves resetting the shortcut selection state when the date range is manually changed. Look for the DateRangePicker component in the Blueprint source, likely under packages/datetime/src/dateRangePicker/. The shortcut highlighting logic is probably in the component's state reducer or a useEffect hook. The solution would be to clear the selected shortcut (e.g., set selectedShortcutIndex to undefined) when the user manually updates the date range inputs.