Control not taking the value if Typed and then exited on Tab

[GXelha]

❔

If we enter the date using the keyboard, and we press Tab to go to next control, the value is not set.
The event OnChange is not executing.
This is happening with version 2.12.0, but seems to be working fine on version 2.3.0

[arthurdenner]

Hey @GXelha! 👋🏽

Sorry for the wait to reply and thank you for reporting this.

I looked into this issue today and managed to fix it by actually handling the onBlur event in our custom input.

I've published 2.13.0-beta.1 to npm. Can you please try it and see if it works for you?

[GXelha]

Thanks @arthurdenner , we'll try it on and let you know as soon as we can. Thanks for your promptly answer.

[henriksvensson]

Hi! Thanks for a great datepicker that fits with Semantic UI! 🙇

I ran into this issue as well and can confirm that onChange is triggered when you tab away from the input when using 2.13.0-beta.1. 👍

Maybe it's another issue, but I would suggest some more improvements on the tab navigation. If the user comes from a keyboard-only usage pattern, it would be super nice if the input behaves as a regular textbox, i.e. pressing tab once moves input focus to the next input field (and triggers the onChange, of course). To me, the datepicker now behaves slightly different depending on whether I've changed the date value or not.

Unchanged date vale:

• Tabbing into the datepicker -> shows the datepicker view
  • Perfect!
• Not changing the value and pressing tab -> focuses the clear-date-button
  • I would suggest to skip this tab stop. If you want to clear the date as a keyboard user, you likely press backspace or delete
• Pressing tab again -> focuses the date navigation buttons in the datepicker
  • Again, I would suggest to close the datepicker view and go to the next input field (or other control)

Changed date value:

• Tabbing into the datepicker -> shows the datepicker view
  • Perfect!
• Changing the date using the keyboard, pressing tab -> datepicker view is removed but tab focus unclear
• Pressing tab twice more -> next input field gets focus
  • Apart from multiple tabs, I think this is a nice behavior for a keyboard-only input user

Just my $0.02, thanks again!

[arthurdenner]

Hi @henriksvensson! 👋🏽

Thank you for your inputs and sorry for the wait to reply.

• Not changing the value and pressing tab -> focuses the clear-date-button
  • I would suggest to skip this tab stop. If you want to clear the date as a keyboard user, you likely press backspace or delete

I think you've got a fair point here, thank you for pointing it out. From I've tested, a screen reader mentions the content is selected so the user knows they can just press backspace or delete to clear the content as you mentioned.

• Pressing tab again -> focuses the date navigation buttons in the datepicker
  • Again, I would suggest to close the datepicker view and go to the next input field (or other control)

I think it's safer to focus on the buttons as we can't really know what the user wants to do next. They can press Escape at any time to close the datepicker and then Tab to the next focusable element. Does that sound reasonable enough?

[arthurdenner]

Solved in #511 and #524. Please let me know if you still find issues.