palantir/blueprint

DateRangeInput2 parseDate user entering an invalid date returns valid date

Open

#6412 opened on Sep 26, 2023

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

Description

Environment

  • Package version(s):
    • Blueprint v4.20.2, Datetime v4.4.37, Datetime2 v0.9.37.
    • Blueprint v5.x DateRangeInput3
  • Operating System: macOS Sonoma 14.0.0
  • Browser name and version: Google Chrome Version 118.0.5993.117 (Official Build) (x86_64)

Problem

Blueprint 4's DateRangeInput2's parseDate()

parseDate() returns a valid date even if the user inputs an invalid date (it returns the current date). This means that onError is never called based on this logic.

This is also present in Blueprint 5's DateRangeInput 3's parseDate().

Code sandbox

https://codesandbox.io/s/clever-snow-65sg9m?file=/src/App.js

Steps to reproduce

Using the sandbox:

  1. Type 01-Jan-2023, 00:00 into the Start date
  2. Type abcdef into the End Date

https://github.com/palantir/blueprint/assets/50017873/2a879499-5296-491f-9f0e-4732c899b34b

Actual behavior

Today's date is entered into the End date.

Expected behavior

The 'Invalid date' is entered into the End date.

Solution

Perhaps revert back to Blueprint v3's implementation return newDate === false ? new Date(undefined) : newDate;

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.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptBluepr]int basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue is in the parseDate function of DateRangeInput2 (v4) and DateRangeInput3 (v5) components. Look at the linked source files: dateRangeInput2.tsx line 1038 and dateRangeInput3.tsx line 936. The bug is that parseDate returns the current date when input is invalid, preventing onError from being called. A suggested fix is to revert to Blueprint v3's implementation which returns new Date(undefined) for invalid input. Check the code sandbox for reproduction. Review the current implementation and ensure the fix aligns with expected behavior.