Enter key should close calendar in DatePicker if date is valid.

Pressing the Enter key after typing a date into the DatePicker control selects the date in the calendar dropdown. Instead, it should close the calendar dropdown if the date is valid.

1. Click or tab to the single DatePicker control here: https://react.carbondesignsystem.com/?path=/story/datepicker--single
2. Type in a valid date such as 03/03/2024 and press Enter.

Result: note that the date is selected in the calendar drop down. If the date is valid, pressing Enter should just close the calendar dropdown. The only way to close the calendar drop down (that I’ve found) is to press the Down arrow key to move focus to the dropdown itself and then press Enter. This isn’t obvious though.

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Is this issue related to a specific component? DatePicker

What did you expect to happen? What happened instead? What would you like to see changed? I expected that pressing Enter after entering a date manually would cause the dropdown portion of the control to close if the date is valid.

What browser are you working in? Chrome

What version of the Carbon Design System are you using? v7.28.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Cognos Analytics 11.2.0

Steps to reproduce the issue

See above.

• Notes In the previous version of IBM Cognos Analytics where we used our own DatePicker control, pressing enter closed the dropdown, so this is technically a regression for us.

[PaulJThompson]

I obviously prefer having Enter also close the pop-over calendar as well, since I logged the bug. 😃 The larger issue is that the behaviour ought to be consistent across controls that have a pop-over for folk navigating with a keyboard.

[tay1orjones]

In looking at this again, it seems what we should aim for here would be:

• Hitting enter should close the calendar dropdown
• More importantly, esc should close the calendar
• This only applies to the single datepicker