DateRangePicker clears date when entering first character into time input
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When using a `DateRangePicker` and setting `granularity` dynamically from `"day"` to `"second"`, the date input gets cleared when entering the first character of the time input. See repro steps below for video, detailed steps & minimal repro code.
### 🤔 Expected Behavior?
When entering the time, the date that the user just entered should not be cleared.
### 😯 Current Behavior
When entering the time, the date that the user just entered is cleared. This only happens the first time.
### 💁 Possible Solution
Work-around: set a `key` based on the `granularity` to force React to create a new component instance with new internal state whenever `granularity` changes.
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
See screen recording & minimal repro code below.
Steps to repro:
1. Change the `granularity` from `"day"` to `"second"`. This is important. When making the granularity static/hard-coded, the bug doesn't happen.
2. Start typing the date.
3. When the first character of the time is entered, the date input is cleared again!
https://github.com/user-attachments/assets/295aff8e-6e57-4d07-b1c3-d48d260ede3c
```
export function BugRepro() {
const [granularity, setGranularity] = useState<"day" | "second">("day");
const [minValue, setMinValue] = useState();
const [maxValue, setMaxValue] = useState();
const onChange = useCallback((newDateRange: DateRange | undefined) => {
setMinValue(newDateRange?.start);
setMaxValue(newDateRange?.end);
}, []);
return (
{
setGranularity(e.target.value);
}}
value={granularity}
>
day
second
{(segment) => }
–
{(segment) => }
);
}
```
### Version
1.4.1
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
macOS / Ubuntu
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the DateRangePicker, DateInput, and DateSegment entry points and reproduce the issue using the provided BugRepro component. Verify the behavior when granularity changes from "day" to "second", then confirm that entering the first time character preserves the date value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100