[Bug]: DatePicker setting and clearing date in range issues

[marcinmotNB]

Package

@carbon/react

Browser

No response

Package version

v1.62.1

React version

v17.0.2

Description

There is a problem with DatePicker component.

• after selecting date range if user clicks outside date component calendar is opened and can't be closed (issue can be reproduced on carbon's storybook too),
• when user clears date range start date input is not cleared,

Screen.Recording.2024-07-31.at.11.27.58.mov

Reproduction/example

https://stackblitz.com/edit/vitejs-vite-bngjrz

Steps to reproduce

• create DatePicker with range and calendar
• select range
• click somewhere outside component

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[2nikhiltom]

Duplicate of #16740
This issue was not observed on and before 1.58

Also it seems like 17071 (on latest: 1.62.1) and 16740 (on :v1.58.0 ) are not actually duplicates

Issue 17071: After selecting a date range, if the user clicks outside the date component, the calendar opens and cannot be closed.

Issue 16740: After selecting a date range initially, the calendar closes. However, if the user opens the end date calendar, does not select any date, and clicks outside the calendar, it won't close.

[marcinmotNB]

Is there also duplicate of second problem (resetting values)?

[2nikhiltom]

I rolled back to older version and did some debugging it seems like the reported issue is happening because of the focus which is added

  const onCalendarClose = (selectedDates, dateStr) => {
    endInputField?.current?.focus();
    calendarRef?.current?.calendarContainer?.classList.remove('open');