ant-design/ant-design

DatePicker with date-fns bug when typing in the date input

Open

#47241 opened on Jan 30, 2024

View on GitHub
 (7 comments) (1 reaction) (0 assignees)TypeScript (98,031 stars) (54,612 forks)batch import
Inactivehelp wanted

Description

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Select date Manually update day by typing in the input e.g. 15 DatePicker will change date after inputing 1 not allowing to enter 5 https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2NiNTc2aDB2NmRieGduZmEwdHk1dTk4bWhkNTZ4OGszeWNvcmUwbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vDCB6mBplGAziysllv/giphy.gif

What is expected?

Date should be correctly modified.

What is actually happening?

Date is not correctly modified, pointed place is jumping to the end when removing, can't modify correctly date or time.

Environment Info
antd 4.24.8
React 18.2.0
System macOS 14.0 (23A344)
Browser Google Chrome Version 120.0.6099.234

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.
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 React knowledgeFamiliarity with date fns
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the DatePicker component in the ant design repository, specifically the handling of manual date input with date fns. Look at the code in the DatePicker folder for logic that listens to keystrokes and updates the date. The issue shows that typing a number triggers an update after the first digit, preventing full input. Examine the related onChange or parsing functions. Check if there are any existing tests for this behavior in the repository's test files.