[#18448] - Calendar formfield breaks tabbing through forms on IE11
- Closed
- 6 Nov 2017
- Medium
- Build: staging
- # 18448
Steps to reproduce the issue
Try to navigate through a form using the TAB key with Internet Explorer 11
Expected result
Jump from one field to the next through whole form
Actual result
Works until you hit the first calendar field. When you tab out of the input field the focus vanishes. Next tab brings you to the first link of the page (eg the main menu).
Tabbing further will work again till it again comes to the same calendar field and then jumps back to the top. Everything "behind" the calendar is not accessible using the TAB key. Not even the calendar icon that activates the popup)
System information (as much as possible)
That's on Internet Epxlorer 11 (on Windows 7).
Chrome works fine.
Additional comments
I guess that is due to some JS fallback code for IE11. Pinging @dgt41 as he may have a clue.
joomla-cms-bot
- | Labels |
Added:
?
|
||
Which other browsers don't work for you? I tried with Chrome and Firefox and they both work fine, that's why I thought it's IE11 specific.
As for the solution, I have no clue
franz-wohlkoenig
- | Category | ⇒ | JavaScript UI/UX |
| Status | New | ⇒ | Discussion |
Safari
Ah I heard about Safari being the new IE
Line 254 in which file?
media/system/js/fields/calendar.js
Yes, deleting that line document.activeElement.blur(); did fix it for me (tested with Edge on Win10 now).
Selecting a value using the keyboard also worked.
What didn't work was when I clicked the "Close" button with the keyboard. Then the focus again goes back to the top. But I think that's a different issue.
Do you want to make a PR?
What didn't work was when I clicked the "Close" button with the keyboard. Then the focus again goes back to the top. But I think that's a different issue.
So that solves the mystery what the heck was I thinking when adding that line?. So the solution should not be removing this line rather executing it only if the active element IS the input field, something like
if (document.activeElement !== inputField) {
inputField.blur();
}
Sorry, I meant "when I clicked the "Close" button with the mouse.".
Also I was wrong about selecting a value using the keyboard. While I can move the selection, and close the popup again with enter, the selected value isn't "taken".
But those issues exists with or without that line 254, so they are different issues. And I'm not even sure if keyboard has to work in the popup. After all, keyboard users likely don't use the popup anyway, I guess they enter the value directly into the input field to begin with.
Personally I'm fine with removing the line as it restores tabbing and solves this issue.
Can you do the PR?
| Status | Discussion | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2017-11-06 10:06:40 |
| Closed_By | ⇒ | Bakual |
Actually I can replicate this in other browsers. I have a feeling that we're missing something on the input blur, because if you tab till the calendar icon, open the calendar and close it through the close button, the tab order is correct. I suspect that we need to remove the listener for keydown on the input blur as well...