Date range picker, end date controls forces you to re-enter start date

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

When you want to edit a selected date in the date range picker. Click on the end date control forces you to first re-enter the start date.

I believe that click on the end date control should only edit the end date.

The feature was tested under Chrome and Edge with the same behaviour.

Tested under Carbon Design System v10

Steps to reproduce the issue

1. Select a start date and end date in the date range picker.
2. Click on the end date field.
3. Select a date.

[JoelOtter]

Thanks @abbeyhrt, that is indeed the issue. I ended up using a skeleton date picker until the date range is loaded, which solves the issue in the same way as your second example. Thanks so much for the help and the detailed response!

[abbeyhrt]

@JoelOtter Thank you for the sandbox, that was super helpful!

Looking through your sandbox, the problematic bit seemed to be the selectedDateRange state being initialized to an empty array and then being set to the initialDateRange in the effect, if you set selectedDateRange like this: const [selectedDateRange, setSelectedDateRange] = useState([new Date(2022, 1, 10), new Date(2022, 5, 20)]); and then remove let initialDateRange = [new Date(2022, 1, 10), new Date(2022, 5, 20)]; from the effect, the calendar then updates the dates as intended. Is there a reason that the initial state selectedDateRange needs to be set in an effect?

Since value is being set in an effect, it happens too fast to see but DatePicker is first being rendered with that undefined selectedDateRange and then the effect runs and selectedDateRange is updated to that initialDateRange. In DatePicker, value isn’t just the default prop, the component starts out with that value but it can be used at any time to force the date picker to be whatever range is in the value. Doing so changes the component to a “controlled” component which then overrides DatePicker’s own logic that it is using to update the dates and that’s why this issue is occurring.

To avoid this issue, you could make the change I mentioned above sandbox example or, if state needs to be set in an effect, like say if that range is being fetched, then you can wait to render the dataPicker until that initialDateRange is set sandbox example for that.

Let me know if that makes sense or you have any more questions!