palantir/blueprint

[DateRangeInput2] TimePicker value doesn't set onBlur

Open

#5526 opened on Sep 6, 2022

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

Description

Environment

  • Package version(s): 0.55
  • Operating System: macOS 12.4
  • Browser name and version: Chrome 98

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://blueprintjs.com/docs/#datetime2/date-range-input2

Steps to reproduce

Open the DateRangeInput2. Set "Enable time picker". Open the datepicker and set 01:00 in the timepicker for the first day in range. Click outside of the popover, but near it, at the top, e.g. 10px. Open the popover again. 01:00 is set. Then try to set 02:00 and close the popover by clicking at the bottom of the page. The time is not set. Provided onBlur callback is called in both situtations

Actual behavior

Time is not set when click outside of popover

Expected behavior

Time should be set onBlur

Possible solution

Contributor guide

Tech stack
typescriptreactcss
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.
clear
Prerequisites
React event handlingBlueprint DateRangeInput2 knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Examine the DateRangeInput2 component code, likely in packages/datetime2/src/dateRangeInput2.tsx, focusing on the onBlur handler for the time picker. Investigate why the time value is not set when clicking outside the popover but not on the time picker itself. Consider the event propagation and state update order. Additionally, review the existing tests for time picker behavior in DateRangeInput2 to understand expected behavior.