I'm detecting a weird bug during the browser testing in my application:
https://jsfiddle.net/jeroendemuyt/w6prze3t/91/
I have a jQuery UI dialog that has an input element where I apply the foundation datepicker functionality to.
<div class="field-dialog-2">
<input type="text" class="load-datepicker">
</div>
In most browsers, this works fine. However, in Internet Explorer 11, this breaks. When the dialog is expanded, you cannot use the back and forward buttons. When I press the buttons, it always wants to go back to the starting month/decenium/...
As you can see in the fiddle, I've tried several methods to see what is the cause of the issue. It appears that the combination of jquery dialogs with foundation datepicker does not work well in internet explorer.
Does anybody know how to fix this? I realy would like this to be compatible with IE
I managed to fix the issue myself after a lot of experimenting.
The issue was that for some reason, IE tries to give focus to the dialog again after clicking anywhere in the datepicker.
So, when I click on any of the controls in the datepicker, apart from the normal click handler that changes the month/decenium/... , it also gives focus to the dialog to the dialog. Since JQuery UI dialogs have the autofocus functionality, this means that the dialog passes the focus to the datepicker input element, wich resets the datepicker to the starting date. This basicly nullified any action that I did on the datepicker.
I've fixed this by manualy overriding the autofocus functionality in my javascript code and forcing it to do nothing when the dialog gains focus. Since I do nothing in my application with this autofocus event, this breaks nothing on my end
$.ui.dialog.prototype._focusTabbable = $.noop;
I've updated my jsFiddle with my solution as well: https://jsfiddle.net/jeroendemuyt/w6prze3t/110/
I hope this solution will save other people the stress I had fixing this :)