adobe / adobe/react-spectrum

DateRangePicker clears date when entering first character into time input

Open
#7,348 0 comments 0 reactions 0 assignees View on GitHub
needs investigation
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.