DateRangePicker clears date when entering first character into time input

[martijnthe]

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!

Screen.Recording.2024-11-11.at.11.26.57.mov

export function BugRepro() {
  const [granularity, setGranularity] = useState<"day" | "second">("day");

  const [minValue, setMinValue] = useState<DateValue | undefined>();
  const [maxValue, setMaxValue] = useState<DateValue | undefined>();
  const onChange = useCallback((newDateRange: DateRange | undefined) => {
    setMinValue(newDateRange?.start);
    setMaxValue(newDateRange?.end);
  }, []);

  return (
    <div>
      <select
        onChange={(e) => {
          setGranularity(e.target.value);
        }}
        value={granularity}
      >
        <option value="day">day</option>
        <option value="second">second</option>
      </select>
      <DateRangePicker
        minValue={minValue}
        maxValue={maxValue}
        onChange={onChange}
        granularity={granularity}
        hourCycle={24}
      >
        <Group>
          <DateInput slot="start">
            {(segment) => <DateSegment segment={segment} />}
          </DateInput>
          <span aria-hidden="true">–</span>
          <DateInput slot="end">
            {(segment) => <DateSegment segment={segment} />}
          </DateInput>
        </Group>
      </DateRangePicker>
    </div>
  );
}

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