Tabbing out of a DatePicker component

If I tab into a DatePicker component it presents me with the calendar popup component/view. However I can’t seem to tab to the next component, I’m forced to use my mouse. Is there a way to let the user continue to use tab to move to the next component with the keyboard?

Did you hit escape to close the modal?

That works. Just wasn’t obvious. Thank you.

Actually to follow up with that if you paste in a value but then hit escape the value is removed. Any suggestion on how to tab and paste?

If you disable auto open, the selection won’t open and tab should work directly

Interesting. Then it’s a debate between the auto open or tabbing. A power user would prefer not to auto open but most users are not power users so they want auto-open. But the downside is that you sacrifice the copy and paste for power users. Interesting. That’s too bad. Thank you for the information, it’s appreciated.

I personally always disable it, because it causes more friction than it helps. I have support for multiple date formats, so most of the users are typing in the format they like the most - e.g. US vs local format.

I’m not sure about the following, this should also persist the value with auto open enabled (default)

  • paste value ; press enter ; press tab
  • paste value ; press enter ; press escape ; press tab

I didn’t even think about pressing enter. Just tab since that’s what I do in most fields. Interesting.

Thank you.

Enter “submits” / confirms the value for the field, allowing it to be processed → escape just ditches it

Date picker is complex, but keyboard users should normally understand how to use it. It also follows the APG recommendations in most places https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/

I just learned something new. I wasn’t aware of these complexities with the date picker and date picking in general. Thank you.

Wait til you find out about Grids :sweat_smile:

Yeah I will admit grids has been interesting. Right now I’m still using the simple Grid. I’m in the process of converting from Vaadin 8 to Vaadin Flow and most of the heavy grid conversion was done before Grid Pro was out so I haven’t yet had a chance to really play with it. But yeah it’s been interesting. That being said I will say it’s a huge improvement over Vaadin 8’s version of Grids.