|
1 |
$('#modalWindow').find('iframe').contents().find('body').focus().blur() |
Unable to type text in inputs in IE 11, missing caret
The app I’m working on allows a user working on a document to open a pop-in (Bootstrap popup), select something, validate, and it adds a field on the document, where the user can type something.
After working for some time on the widget and changing many things, I test in IE11 and find myself unable to type anything anywhere, after selecting a value.
The text input fields are focused (they have the Bootstrap blue halo), but the caret does not appear, and typing doesn’t do anything.
Clearing another field that already has some value (using the “X” in the field) makes the inputs work again.
All other browsers are working fine. It smells very strongly like a IE bug.
A very similar bug is already documented here but it looks like it should have been fixed in 2014, and I’m using Windows 10 (so one would assume it has this fix).
Anyway, the bug points towards a focused element being removed from the DOM.
I have tried to just
focus something else and then
blur it, but it didn’t work.
My salvation came when I realized that the content of the popup was inside an iframe. Selecting and bluring the iframe’s body did the trick :