In IE not able to get cursor when focus on input elements of a modal

Question

I have modal pop-up in which I have few controls like TextArea, Inputs , dropdowns, DatePickers...

When I click on textbox or datepickers, I am not able to see the cursor(but i can see the focus styles applied) in the controls to type something. For the rest it works fine.. If I use tab key or shift+tab from other controls, then even in inputs I am able to see cursor and type..

This issue is only in IE. It works fine in FF and Chrome...

I have no clue what's going on. Please help me with a workaround or solution...

what happens when you right click, developer mode, and set it to edge? — PolarisUser, Oct 27 '15 at 18:56
Yeah, but that doesn't mean thats what the HTML is running as. It could be set to run in ie8 compatibility — PolarisUser, Oct 27 '15 at 19:18
I knew that its running in Edge. I even double checked by opening developer mode. It shows edge running....... — user2486535, Oct 27 '15 at 19:56

score 3 · Answer 1 · edited May 23 '17 at 12:06

I recently stumbled upon the same or a very similar problem.

My site had two modal windows. After closing one modal window and then opening the next one, all text inputs on that one were not usable. When I clicked on an input, it changed its state to focus (CSS styles showed that) but there was no cursor and I was not able to type anything in. It was however possible to focus it manually using jQuery.

After hours of struggle I found this and this.

If an element has focus on it but is removed from the DOM (e.g. closing a modal window), IE is not able to put this focus on other elements.

This is what helped me:

modalWindowDiv.innerHTML = "";
$('#modalWindowDiv').remove();

or

$('#modalWindowDiv').empty().remove();

Just delete the contents of a modal window before removing it from the DOM. That should correctly remove any focus from it.

In IE not able to get cursor when focus on input elements of a modal

1 Answers1