DatePicker: Unable to discern partially cleared date vs null for validationState
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
We are allowing users to set the DatePicker value to null in order to clear the date for an asset property. The problem we are experiencing is that as soon as user clears a date segment the value is null. There is no way to discern if user has clear the entire date or just a segment:
vs

We can't set the validationState to the partially cleared date because its value is the same as if user has clear all the segments. Both cases are null.
## 🤔 Expected Behavior
Some way to get the current displayed state in order to set the validationState based upon what is shown to the user.
## 😯 Current Behavior
So far the only solution we have is to set the validationState to "invalid" if the year value is less that 4 digits but not null. Then use onBlur to refresh the component once focus is lost.
## 💁 Possible Solution
## 🔦 Context
The problem is that the DatePicker does not seem to handle the use case where users may want to set the value to null to clear out an existing date.
## 💻 Code Sample
https://codesandbox.io/s/gracious-kapitsa-h5lf4e
You can see once a segment is cleared the only value returned is null.
## 🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3.23.0
| Browser | Chrome 110.0.5481.177
| Operating System | Mac
## 🧢 Your Company/Team
Assets Essentials
## 🕷 Tracking Issue (optional)
Contributor guide
Research direction
Start by reproducing the behavior in the linked CodeSandbox and trace the DatePicker entry point handling cleared segments and null values. Determine how the displayed partial date can be distinguished from a fully cleared value, then verify that validationState reflects both cases correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100