react-stately/datepicker returning undefined values, not handling empty time inputs

[laurenhesterman]

Hello, I am using the 'react-stately/datepicker library to manage state with my datepicker in my project. Every time the user backspaces/deletes the start or end time input (i.e. end time input is blank) the website crashes before they can type in a new value, and it seems to be coming from the 'useDateRangePickerState' function returning undefined values when it shouldn't.

[snowystinger]

Any chance you could provide a codesandbox demonstrating the issue? Here's a starter template https://codesandbox.io/s/spring-lake-gocqmp

[laurenhesterman]

Apologies, I could try to do that but it will be a bit difficult to emulate due to some dependencies. Here are some more details:

const defaultNowTime = {timeValue}
const [nowTime, setNowTime] = useState(defaultNowTime);

const state = useDateRangePickerState({
...props,
defaultValue: {
start: defaultNowTime.set({ second: 0, minute: 0, millisecond: 0, hour: 0 }),
end: defaultNowTime
},
hideTimeZone: true,
shouldCloseOnSelect: false,
});
console.log(state) // this will contain empty values

All the necessary inputs to the 'useDateRangePickerState' function (i.e. defaultNowTime) will be valid but the result will contain blank values for 'value' among others, which will crash the site since they are needed.

[snowystinger]

Well, the point is to reduce the dependencies so we know if it's our bug or if it's something in your codebase. Either way, we're hoping we can help.

I grabbed the Tailwind example we have in our code https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html#styled-examples
And I tried plugging in your code https://codesandbox.io/s/goofy-nobel-wz1vjh?file=/src/DateRangePicker.js:657-691

Then I deleted the minutes in the end time, then typed in a new value. It did move on to the AM field after one number which seemed premature, but it definitely didn't crash.

Can you provide more reproduction steps?