How not to lose Div focus when inside button is clicked

Question

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.

<div class="upload_post" id="write_post_container" tabindex='-1'>           
 <form method="post">
<div class="upload_div">
 <textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
 <input type="hidden" name="post_img">
 <ul>
    <li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
 </ul>
  <input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" /> 

<div class="post">
<button>Post</button>
</div>
</div>
</form>

Here is my JS code :

<script type="text/javascript">
 $("#write_post_text").focusin(function() {
    $("#write_post_upload").slideDown();
  });
 $("#write_post_container, #write_post_container *").blur(function(e){
     if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
 $("#write_post_upload").slideUp();
    }
});
$("#upload_post_img").click(function () {
      $("#bTimelineFile").focus().trigger('click');
      $("#write_post_upload").show();
});
</script>

Answer 1

you can create a variable and change it whenever Choose file is clicked

like this

don't forget to reset it

 $("#write_post_text").focusin(function() {
    $("#write_post_upload").slideDown();
  });

  var blur = false;
 $("#write_post_container, #write_post_container *").blur(function(e){
     if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
     if(!blur){
                $("#write_post_upload").slideUp();    
     }

    }
});
$("#upload_post_img").click(function () {
      $("#bTimelineFile").focus().trigger('click');
      $("#write_post_upload").show();
});


$("#bTimelineFile").click(function () {
     blur = true;
});