palantir/blueprint

Dateinput and Dateinput2 popover and maxDate behavior

Open

#5771 opened on Nov 28, 2022

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

Description

Environment

  • Package version(s): Datetime 4.4.7 and Datetime2 0.9.5
  • Operating System: Windows 11
  • Browser name and version: Chrome 107 and Firefox 107

Code Sandbox

https://codesandbox.io/s/bold-david-nbr76c?file=/src/DatetimeExample.tsx

Steps to reproduce

Popover

  1. Click on Dateinput or Dateinput2 to show popover
  2. Change the hour field of the time picker to something like 10
  3. Click outside the popover to close it.
  4. Click on the Dateinput or Dateinput2 to show popover
  5. Change the hour field of the time picker to something like 11
  6. Click outside the popover to close it.

maxdate

  1. Click on Dateinput or Dateinput2 to show popover
  2. Change the hour field of the time picker to something like 10

Actual behavior

Popover With step 6 the popover will close and reopen straight away

maxdate For Dateinput it will accept the picked time but Dateinput will show a red border indicating the selected time is invalid

Expected behavior

Popover With step 6 the popover should close and not reopen

maxdate The maxdate should allow any hour of the maxday for Dateinput2 component

Possible solution

Contributor guide

Tech stack
reacttypescript
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
ReactBlueprint UIDateInput component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the popover close logic in Dateinput and Dateinput2 components. The issue reports that after changing the hour field and closing the popover, it reopens automatically. Check the popover's onClose handler and state reset logic. Also examine the maxdate prop: for Dateinput2, it should allow any hour of the max day but currently shows a red border indicating invalid. Look at the validation logic in the DateInput2 component. Review the linked CodeSandbox (https://codesandbox.io/s/bold david nbr76c?file=/src/DatetimeExample.tsx) to reproduce. The fix may involve adjusting the popover's close behavior and the date validation for maxdate.