[Bug]: DatePicker: Cannot select date range using keyboard

[makafsal]

Package

@carbon/react

Browser

Chrome

Package version

v1.65.0

React version

v18.2.0

Description

When trying to select a date range using the keyboard it loses focus after selecting an initial date by pressing the 'Enter' key.

https://github.com/user-attachments/assets/300c66e4-bacd-4f4d-931f-1b2839e825d3

Reproduction/example

https://stackblitz.com/edit/github-bmgxxb-ds4ysm?file=src%2FApp.jsx

Steps to reproduce

1. Press the Tab key and focus on the DatePicker (calendar will appear)
2. Press the Down Arrow, focus date
3. Press the Enter key to select the focused date (We can observe that the focus is lost from Calendar)

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

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

[Kritvi-bhatia17]

Hi @makafsal, I can see the focus state on the start date after selecting it. I've added a screenshot and screen recording for reference. Could you please confirm if you're encountering the issue you've mentioned in the 'Date picker range with calendar' or in another variant?

https://github.com/user-attachments/assets/888b9619-997f-45be-a5b2-c7824d8049f0

[makafsal]

Hi @Kritvi-bhatia17, Thank you for your response. I figured out that the issue pops up when I give the value property for the DatePicker and DatePickerInput components. Could you please confirm that I need to give the value property?

[Kritvi-bhatia17]

Hi @makafsal! @carbon-design-system/developers will help us with that.

[Geethkadali]

Hi @Kritvi-bhatia17, we do have a focus issue of a date picker #17398

[Kritvi-bhatia17]

Hi @Geethkadali! Thanks for opening the issue. @carbon-design-system/developers will look into it.