[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.

Screen.Recording.2024-09-02.at.4.39.09.PM.mov

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

• I agree to follow this project's Code of Conduct
• 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?

Screen.Recording.2024-09-04.at.12.23.59.PM.mov

[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.

[makafsal]

@Kritvi-bhatia17 - I think you don't need any more info from my end so that you can remove the waiting for author's response label.

[2nikhiltom]

Hey @makafsal ,

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

after selecting the start date (start date remains focused ) and when you select the end date the calendar collapse and focus moved back to the triggering element i.e (start input date) and the range is selected
I confirmed same behavior on the shared stackblitz and the reactstorybook - this seems the expected behaviour

Could you expand more on the the issue/required behavior ?

[2nikhiltom]

Closing this since it is the expected behaviour of focus - happy to reopen with more details