jQuery UI Dialog and Textarea Focus Issue

Question

I'm working on a modal comment system using jQuery and jQuery UI, but I'm having some issues with focus. I have a series of divs inside the modal to switch between Login and Add comment, as below:

<div id="modal" title="Loading">
 <div id="modalContent"></div>

 <div id="modalLogin">
  <div class="loginBox"></div>
  <div class="addCommentBox"></div>
  <div class="commentReview"></div>
 </div>
</div>

Inside of the addCommentBox div, I've got the comment code:

 <form action="/comments/add" class="addCommentForm" name="addCommentForm" method="post">
  <textarea name="content" class="addCommentContent"></textarea>
  <button value="Add Comment" type="submit" class="commentPost"/>
  <button value="Clear Comment" type="submit" id="clearComment"/>
 </form>

The issue is that about half the time after opening the dialog the textarea inside the addCommentBox div doesn't react to keyboard inputs when selected. The mouse works correctly and will allow text to be selected, but keyboard control does nothing.

I have no event listeners on the textarea. I've got some on the buttons, but they are targeting only the buttons.

The only thing that happens in the HTML seems to be the fact that every time I click on the modal, the z-index increases for the overall modal div. I have set the addCommentBox div to have a z-index of 9999, greater than the z-index of the modal.

Any suggestions or directions to research would be greatly appreciated. Thanks!

Answer 1

If it's happening "half the time" that's a hard one. Test it on some other browsers to see if the same thing happens.