search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

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

Closed PaulJThompson closed 1 year ago

PaulJThompson commented 3 years ago

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?

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.

andreancardona commented 3 years ago

@aagonzales hey Anna! wanted to quickly get your opinion on what the expected behavior was in this case? From a design perspective.

joshblack commented 3 years ago

bump @aagonzales when you have a sec 👀

aagonzales commented 3 years ago

I'm not the expert with keyboard acitons but @joshblack or @andreancardona do you know what happens in other form input fields when the user hits enter?

When you select a number in the calendar menu and hit enter it does close the menu but the focus remains on the field input, so I guess it would make sense if hitting enter while just typing in the field would also close the menu.

joshblack commented 3 years ago

@aagonzales as I understand it, using enter in an input field will submit the form by default. You can prevent this behavior by preventing the event (hitting enter) from propagating, though.

In terms of keyboard interaction, I think my assumption is that Esc would be what you'd use to dismiss a dialog/non-modal dialog/popup/tooltip.

aagonzales commented 3 years ago

Ok, so sounds like enter is used for submitting data and not as a close function. However, the menu also is not currently closing when you hit esc either, so we should add that in. Conclusion: we do not want enter to close the menu, correct @joshblack

Looking at this the biggest problem I'm actually seeing is that the pop-over menu calendar is not closing once you tab away focus from the menu. Seems like it should at least be closing then. In Dropdown and Overflow menu the menu closes automatically if you tab away.

Mar-04-2021 14-14-48

aagonzales commented 3 years ago

Actually, looks like both dropdown and overflow menu close the menu when you hit enter as well so maybe we should have the pop-over calendar menu also close on enter. What are y'all's opinion?

PaulJThompson commented 3 years ago

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.

tw15egan commented 3 years ago

@PaulJThompson just confirming, this behavior would only apply to the single variant of DatePicker? I would expect Enter to allow me to update/change dates in a Range DatePicker, and not close the menu (but it should be able to be closed via ESC)

tay1orjones commented 1 year ago

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