Date and time not updating with shouldCloseOnSelect equals false in DateRangePicker from react-aria-components

[upender7270]

Provide a general summary of the issue here

I am trying to use the DateRangePicker from react-aria-components. When the props shouldCloseOnSelect = false and granularity="minute" are set, then select a date range, date time not updating in the picker (DateField group) This happened only when we had no date time set initially.

I have added the codesandbox link and video of the behaviour

🤔 Expected Behavior?

with shouldCloseOnSelect = false On select date range, then the selected date range should be visible in the trigger (FieldGroup)

😯 Current Behavior

with shouldCloseOnSelect = false On select date range, then the selected date range is not visible in the trigger (FieldGroup)

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/react-spectrum-range-picker-forked-gk44tw?workspaceId=32ded442-599e-4949-b8e5-e71ce8c0b757 Screencast from 27-08-24 06:54:54 PM IST.webm

Version

1.3.3

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Ubuntu 22.04

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This looks to be because of this if block: https://github.com/adobe/react-spectrum/blob/a899bdfb6c4020c0ef17d87fe57ab2782e895c1c/packages/%40react-stately/datepicker/src/useDateRangePickerState.ts#L134-L141 This means the DateRangePicker will only uses the placeholder time values if the operation will close the calendar popover. I feel like the following else statement isn't necessary and that we should always use the time value placeholders if none are provided. Unfortunately, this behavior seems to have been added quite intentionally (and thus might be problematic to change), trying to dig up why.

My best guess is that we didn't want to jump the gun persay and immediately fire a change event when the user selected their desired date range but not their desired time range in the popover like in the the final examples in the follow section: https://react-spectrum.adobe.com/react-spectrum/DateRangePicker.html#granularity.