fix: Set a placeholder time when closing a DateRangePicker with time granularity (#8278)

Author: devongovett

packages/@react-stately/datepicker/src/useDateRangePickerState.ts

@@ -131,7 +131,8 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let setDateRange = (range: RangeValue<DateValue | null>) => {
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (isCompleteRange(range) && timeRange?.start && timeRange?.end) {
+      // Set a placeholder time if the popover is closing so we don't leave the field in an incomplete state.
+      if (isCompleteRange(range) && (shouldClose || (timeRange?.start && timeRange?.end))) {
         commitValue(range, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)

packages/react-aria-components/test/DateRangePicker.test.js

@@ -33,7 +33,7 @@ let TestDateRangePicker = (props) => (
     <Text slot="errorMessage">Error</Text>
     <Popover>
       <Dialog>
-        <RangeCalendar>
+        <RangeCalendar focusedValue={props.focusedValue}>
           <header>
             <Button slot="previous">◀</Button>
             <Heading />
@@ -280,6 +280,26 @@ describe('DateRangePicker', () => {
     expect(dialog).toBeInTheDocument();
   });
 
+  it('should set a placeholder time when closing', async () => {
+    let {getByRole, getAllByRole} = render(<TestDateRangePicker granularity="second" focusedValue={new CalendarDate(2023, 1, 10)} />);
+
+    let button = getByRole('button');
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+    let cells = getAllByRole('gridcell');
+
+    await user.click(cells[5].children[0]);
+    await user.click(cells[10].children[0]);
+    expect(dialog).not.toBeInTheDocument();
+
+    let group = getByRole('group');
+    let inputs = group.querySelectorAll('.react-aria-DateInput');
+    let normalize = (s) => s.replace(/\s/g, ' ').replace(/[\u2066\u2069]/g, '');
+    expect(normalize(inputs[0].textContent)).toBe(normalize(new Date(2023, 0, 6).toLocaleString()));
+    expect(normalize(inputs[1].textContent)).toBe(normalize(new Date(2023, 0, 11).toLocaleString()));
+  });
+
   it('should disable button and date input when DatePicker is disabled', () => {
     let {getByRole} = render(<TestDateRangePicker isDisabled />);