Why isn't this textarea focusing with .focus()?

I have this code to focus a textarea when the user clicks on the "Reply" button:

    $('#reply_msg').live('mousedown', function() {
        $(this).hide();
        $('#reply_holder').show();
        $('#reply_message').focus();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="reply_msg">
      <div class="replybox">
      <span>Click here to <span class="link">Reply</span></span>
      </div>
      </div>
      <div id="reply_holder" style="display: none;">
      <div id="reply_tab"><img src="images/blank.gif" /> Reply</div>
      <label class="label" for="reply_subject" style="padding-top: 7px; width: 64px; color: #999; font-weight: bold; font-size: 13px;">Subject</label>
      <input type="text" id="reply_subject" class="input" style="width: 799px;" value="Re: <?php echo $info['subject']; ?>" />
      <br /><br />
      <textarea name="reply" id="reply_message" class="input" spellcheck="false"></textarea>
      <br />
      <div id="reply_buttons">
      <button type="button" class="button" id="send_reply">Send</button>
      <button type="button" class="button" id="cancel_reply_msg">Cancel</button>
      <!--<button type="button" class="button" id="save_draft_reply">Save Draft</button>-->
      </div>
    </div>

It shows the reply form, but the textarea won't focus. I'm adding the textarea via AJAX which is why I am using .live(). The box that I add shows (I even add #reply_msg via AJAX and stuff happens when I mouse down on it) but it won't focus on the textarea.

Solution 1:

A mouse-click on a focusable element raises events in the following order:

1. mousedown
2. focus
3. mouseup
4. click

So, here's what's happening:

1. mousedown is raised by <a>
2. your event handler attempts to focus the <textarea>
3. the default event behavior of mousedown tries to focus <a> (which takes focus from the <textarea>)

Here's a demo illustrating this behavior:

$("a,textarea").on("mousedown mouseup click focus blur", function(e) {
  console.log("%s: %s", this.tagName, e.type);
})
$("a").mousedown(function(e) {
  $("textarea").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)">reply</a>
<textarea></textarea>

So, how do we get around this?

Use event.preventDefault() to suppress mousedown's default behavior:

$(document).on("mousedown", "#reply_msg", function(e) {
    e.preventDefault();
    $(this).hide();
    $("#reply_message").show().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="reply_msg">reply</a>
<textarea id="reply_message"></textarea>

Solution 2:

Focusing on something from an event handler that, itself, grants focus, is always problematic. The general solution is to set focus after a timeout:

setTimeout(function() {
  $('#reply_message').focus();
}, 0);

That lets the browser do its thing, and then you come back and yank focus over to where you want it.

Solution 3:

Could it be the same issue as this? jQuery Textarea focus

Try calling .focus() after .show() has completed.

$('#reply_msg').live('mousedown', function() {
    $(this).hide();
    $('#reply_holder').show("fast", function(){
        $('#reply_message').focus();
    }); 
});

Solution 4:

I ran into this issue today and in my case, it was caused by a bug in jQuery UI (v1.11.4) which causes textarea elements inside of draggable/droppable elements to stop default click behavior before the textarea receives the focus click.

The solution was to rework the UI so that the textarea no longer appears inside the draggable element.

This was a particularly difficult issue to debug, so I am leaving an answer here in case others find it helpful.