JQuery UI dialog and text area issue

Question

I am working on a modal commenting system using jQuery and jQuery UI, but I have some focus issues. I have a series of divs inside a modal to switch between Login and Add comment, as shown 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 the addCommentBox div, I have a 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 problem is that approximately half the time after the dialog opens, the text field inside the addCommentBox div addCommentBox not respond to keyboard input when selected. The mouse works correctly and allows you to select text, but keyboard control does nothing.

I do not have event listeners in the text box. I have buttons on buttons, but they focus only on buttons.

The only thing that happens in HTML seems to be that every time I click on a modal, the z-index is incremented for the general modal div. I set the addCommentBox div for the z-index of 9999, which is more than the z-index of the modal.

Any suggestions or research directions are welcome. Thanks!

Answer 1

If this happens "half", it's hard. Check it out on some other browsers to see if the same thing is happening.

Answer 2

How do you hide loginBox and commentReview? If you use opacity, it's possible that what you don't see is sitting on top of the text box.

You will not see elements with opacity 0, but they still exist in all other respects. They will receive mouse events, not allowing you to click on a text field.

If you see a text field, then this does not look like a z-index problem.

Answer 3

When opening a dialog, try to focus the text field during the "open" function.

 $ ('# modal'). dialog ({
     open: function () {
         $ ('textarea [name = content]'). focus ();
     }
 });

Answer 4

It looks like the problem is related to something else on the page. Have you tested this by putting the above function on your own page separately from all other functions?

Answer 5

Try setting the TABINDEX property for the text field if it is not set.